Announcement Announcement Module
Collapse
No announcement yet.
Some direction please Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • Kayekaye
    Comment on Seeking critiques
    Kayekaye
    That is nice it does show the two shades. Have you made a comp with all white on a black background? I'd like to see that.

    I have worked with those all white decals, and laid a second color...
    Today, 02:10 AM
  • kiwikat07
    Reply to Seeking critiques
    kiwikat07
    Okay, I found a one-color option that I'm pleased with using a dot pattern in Illustrator. I will check with the decal company and see if they are able to render the dots. I would think so....
    Today, 12:32 AM
  • kiwikat07
    Comment on Seeking critiques
    kiwikat07
    Hi Kayekaye! Yes, I agree. Black-only is seemingly less needed these days. Ironically, in this case I really will need a one-color option because we will be doing some window decals! (For example: ht...
    Today, 12:10 AM
  • garricks
    Comment on Happy Last Friday of July!!!!
    garricks
    Ain't that the truth!

    Additionally it's been unseasonably cool so far this summer. We've only been in the 90s a few times. Tomorrow we're due to hit 99 in the afternoon, with a heat index...
    Yesterday, 11:18 PM
  • PrintDriver
    Reply to Happy Last Friday of July!!!!
    PrintDriver
    Happy Friday.
    It's been a nice quiet July for a change. Too bad it's over so quickly. Why does the slide into winter never take as long as the slide into spring?...
    Yesterday, 10:14 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • 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, 10:26 PM.

            Comment

             
            home | site map | advertising/sponsorships | about us | careers | contact us | help courses | browse jobs | freelancers | events | forums | content | member benefits | reprints & permissions about | terms of use | privacy policy | Copyright © 2014 Mediabistro Inc. Mediabistro Inc. call (212) 389-2000 or email us
            Working...
            X