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

Advertisement Advertisement Module
Collapse

Latest Topics Latest Topics Module
Collapse

  • HotButton
    Reply to 4 Easy Tips to Manage Your PowerPoint File Size
    HotButton
    It's currently the MS-Office raster format of choice because its compression is lossless and its transparency is supported....
    Today, 02:23 PM
  • PrintDriver
    Reply to Updated Brochure layout for ArtMap
    PrintDriver
    Ah, you have just stepped into a big pile of my biggest pet peeve.

    Your printer's proof is NOT another opportunity to change things. It is your opportunity to approve the printer's color...
    Today, 01:44 PM
  • frutiger
    Reply to Why do I struggle with layout?
    frutiger
    Sounds like you're adhering to too many "rules" and limiting yourself "inside the box" too much. I'm sure you've heard the graphic design saying, "You have to know the rules in...
    Today, 01:39 PM
  • Momoshy
    Reply to Death By Micromanagement- Advice Needed
    Momoshy
    You are a good boss, my boss only gets incredibly upset when I point out things like this, or outright blames me instead.

    I guess what I am trying to say, is you have to weight the person...
    Today, 01:34 PM
  • frutiger
    Reply to 4 Easy Tips to Manage Your PowerPoint File Size
    frutiger
    I just make my photos at 100 percent to size in the PPT with a resolution of 150, sometimes less, then hand off to the client. I've heard that PNGs are the best for Office, but I'm not sure why.
    Today, 01:22 PM

Powered by mediabistro.com
Mediabistro Creative Sites Mediabistro Creative Sites 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

            Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2015 Mediabistro Inc.
            Working...
            X