Announcement

Collapse
No announcement yet.

Some direction please

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Some direction please

    There's something I'd like to impliment, but not exactly sure how to search for the tutorial.

    what I'm looking to do is make a bio page with some pictures of people and when those pictures are rolled over, some text in another area of the screen appears. (probably replaces some other text)

    I've looked at remote rollovers, but those are mostly using images. Do you use the same technique and fashion it to use text, is that going to be much different than using two images?

    Thanks
    “Pain is temporary. Quitting lasts forever.” Lance Armstrong

  • #2
    You will need to add listeners to those images. Then use an event handler to change them. Start by looking into event handling. Once you have the events firing and be handled its relatively straightforward.

    Comment


    • #3
      Awesome, I wasn't expecting such a speedy response on a weekend, glad i'm not the only one in front of a computer on saturday

      Thanks
      “Pain is temporary. Quitting lasts forever.” Lance Armstrong

      Comment


      • #4
        sadly…

        Comment


        • #5
          tZ, stupid question...I was just thinking I remember seeing a thing on how to do this with no Javascript whatsoever..but instead you utlize the pseudo tags in css and just make hidden divs that appear when things are rolled over that way. That sounds much easier, any reason I wouldn't want to go down that road?
          “Pain is temporary. Quitting lasts forever.” Lance Armstrong

          Comment


          • #6
            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            
            <script type="text/javascript">
            
            var swaps = new Array();
            
            // define swap['html elements id'] = 'text'
            swaps['image_1'] = 'Image one text';
            swaps['image_2'] = 'Image two text';
            swaps['image_3'] = 'Image three text';
            
            // element that will update
            var updateElementId = 'caption';
            
            window.onload = function() {
            	
            	var changeElement = document.getElementById(updateElementId);
            	
            	
            	for(x in swaps) {
            		
            		if(!document.getElementById(x)) { continue; }
            		var element = document.getElementById(x);
            		addEvent(element,'mouseover',packageEvent(changeElement,swaps[x]),false);
            		
            	}
            	
            	// default swap
            	changeImageCaption('',changeElement,swaps['image_1'] );
            	
            }
            
            function packageEvent(pElement,pText) {
            	return function(pEvt) { changeImageCaption(pEvt,pElement,pText); };
            }
            
            function changeImageCaption(pEvt,pElement,pText) {
            	var text = document.createTextNode(pText);
            	if(pElement.firstChild) {
            		var child = pElement.firstChild;
            		pElement.replaceChild(text,child);
            	} else {
            		pElement.appendChild(text);
            	}	
            }
            
            function addEvent(elm,evType,fn,useCapture) {
              if(elm.addEventListener) {
                	elm.addEventListener(evType,fn,useCapture);
                	return true;
                } else if(elm.attachEvent) {
                  var r = elm.attachEvent('on'+evType,fn);
                  return r;
                } else {
                	elm['on'+evType]=fn;
                	return;
              }
            }
            </script>
            
            </head>
            
            <body>
            
            	<div id="image_1" style="width:50px;height:50px;background-color:red;"></div>
            	<div id="image_2" style="width:50px;height:50px;background-color:red;"></div>
            	<div id="image_3" style="width:50px;height:50px;background-color:red;"></div>
            	
            	<p id="caption"></p>
            	
            </body>
            </html>
            That will do it.

            To keep it simple stupid though your image elements will need to have a unique id. Your changing element/module will also need an id. Than you just define those in javascript.
            Last edited by tZ; 08-16-2008, 05:26 PM.

            Comment

            Search

            Collapse

            Advertisement

            Collapse

            Latest Topics

            Collapse

            • Cosmo
              Comment on Designing With a Grid
              Cosmo
              I'm thinking that may be what he was meaning. For posters I really focus on heirarchy. Grids... not so much. Unless it was maybe a series of posters and I wanted them to look similar.
              Today, 03:56 PM
            • Kayekaye
              Reply to Designing With a Grid
              Kayekaye
              Most grids are for a continuous pleasant group of graphics so as to "belong" together. Most used in magazines and newspapers you can establish a grid for any project. Then subsequent related...
              Today, 03:01 PM
            • JCookeDesign
              Comment on pdf font issue
              JCookeDesign
              That's good to know!
              Today, 02:12 PM
            • HotButton
              Reply to Designing With a Grid
              HotButton
              As is the case with regard to many types of design decision, right or wrong is really not applicable, but that's not to say one decision won't lead to a better result than another.

              I was...
              Today, 01:15 PM
            • Cosmo
              Reply to pdf font issue
              Cosmo
              One way you can work around it (and I always recommend work-arounds as a last step) is to place the PDF into Illustrator. Then go Object>Flatten Transparency and click "Convert All Text To Ou...
              Today, 01:10 PM

            GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright © 2016 Mediabistro Holdings
            Working...
            X