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

  • Kayekaye
    Reply to LOGO FEEDBACK
    Kayekaye
    Yes the two words did turn out nice, aside from the l and s not touching and the F not being entirely readable at first glance. The rest of it has a lot of concerns....
    Today, 01:48 AM
  • PanToshi
    Reply to Seeking critique for some of my artworks
    PanToshi
    Neat stuff, but not graphic design per se, more digital art which is more subjective and thus hard to critique. I like your line work pieces much more than the vector polygon one - the Japanese-esque...
    Yesterday, 11:40 PM
  • B
    Reply to Adobe Ä°llustrator Please Advice
    B
    There is a quick way to roughly reproduce the artwork in Illustrator, but there will still be lots of clean-up and reassigning the colors to be three separate spot colors.

    I'm using Illustrator...
    Yesterday, 11:18 PM
  • Sean Wilson
    Great Developer.. Terrible Designer.
    Sean Wilson
    Hello, my name is Sean Wilson and I'm a web developer..

    I have an issue that I'd like to present to you all today, that is my inability to produce great website designs. I have an extensive...
    Yesterday, 11:17 PM
  • itouch
    Reply to Adobe Ä°llustrator Please Advice
    itouch
    I dont need to learn all program.I just need to learn this process.I will repeat always.Thats all what they want.Other designs are same like this one.So i will learn step by step from your video and i...
    Yesterday, 11:07 PM

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