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, 06:26 PM.

            Comment

            Search

            Collapse

            Sponsor

            Collapse

            Incredible Stock

            Latest Topics

            Collapse

            • bigdata
              Reply to What logo is this?
              bigdata
              Orville Redenbacher prelim?
              Today, 09:33 PM
            • indigomeadows
              Is there a software that will do this?
              indigomeadows
              I am trying to find a software that will do the following things, I don't need an expensive program, I don't want to buy an expensive program. I am a newb but I'm not an idiot but man, some of the programs...
              Today, 08:12 PM
            • seamas
              Reply to Dealing with the office power trip.
              seamas
              One thing about guy culture and women culture I have noticed is men will insult each other freely--especially if they are friends.
              Men often use ribbing and the like to feel each other out. If...
              Today, 05:00 PM
            • jp_isit
              Reply to Printing in 4C vs 2C - HELP!
              jp_isit
              Ok, thanks. Yes, this is their conversion... we're a bit rushed prioro to CNY. The good news is this is a proof so it's good to know duotone is a better option if it doesn't come out ok and we need...
              Today, 04:53 PM
            • John Ruggieri
              Reply to Font ID please - Trajan Pro??
              John Ruggieri
              All set! Client came through. It's Meta.
              Today, 04:25 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