Image Description on Mouse Over

  Post new topicReply to topicPrintable Version
<< View previous topic View next topic >>
Share: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
#1   Image Description on Mouse Over
jennielynn1127
CZ Newbie
jennielynn1127 has been a member for over 20 year's 20 Year Member
usa.gif kansas.gif
Occupation: Sales
Age: 42
Gender: Female
Website:
Status: Offline
Joined: Aug 26, 2003
0.00 posts per day
Posts: 23
Points: 758
AIM Address Yahoo Messenger MSN Messenger 
Ok, you javascript gurus... here's what my dad wants...
[ Register or login to view links on this board. ]

I could take the time to copy his code, but I really don't feel right about that, so I was wondering if you guys could take some time and fix up a script for me to embed into dad's site for some of his images.

Thanks in advance!

Ciao,
*~Jennie~*




_________________
[ Register or login to view links on this board. ] [ Register or login to view links on this board. ]
[ Register or login to view links on this board. ]
Back to top Reply with quote
#2   
Kelly_Hero
PayPal Donation
CZ Revered Member
 Codezwiz Site Donator
Kelly_Hero has been a member for over 20 year's 20 Year Member
usa.gif southcarolina.gif
Occupation: Web Developer
Age: 59
Gender: Female
Website:
Status: Offline
Joined: Aug 20, 2003
0.50 posts per day
Posts: 3765
Points: 351,412
   
Basically what they've done is just an image swap on mouseover. It just takes 2 images and a bit of javascript code.

Create your original image. Make another image the same size as the original with your description on it.

Put this code in the <head> section of your page. (Remove the space in the word SCRIPT at the beginning and end of the code.)

<S CRIPT TYPE="text/javascript">
<!--
function newImage(arg) {
   if (document.images) {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
   }
}

function changeImages() {
   if (document.images && (preloadFlag == true)) {
      for (var i=0; i<changeImages.arguments.length; i+=2) {
         document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
   }
}

var preloadFlag = false;
function preloadImages() {
   if (document.images) {
      thislayer_over = newImage("images/image_over.gif");
      preloadFlag = true;
   }
}
// -->
</S CRIPT>


Change "images/image_over.gif" to the path/name of your description image.

Then put this code in the <body> section of your page:

<BODY ONLOAD="preloadImages();">

<A HREF="#"
   ONMOUSEOVER="changeImages('thislayer', 'images/image_over.gif'); return true;"
   ONMOUSEOUT="changeImages('thislayer', 'images/image.gif'); return true;">
   <IMG NAME="thislayer" SRC="images/image.gif" WIDTH=352 HEIGHT=288 BORDER=0 ALT=""></A>


Again, change 'images/image_over.gif' to your path/name of the description image and change 'images/image.gif' to the path/name of the original image.

Let me know if you have any questions.

Kelly


Back to top Reply with quote
#3   
jennielynn1127
CZ Newbie
jennielynn1127 has been a member for over 20 year's 20 Year Member
usa.gif kansas.gif
Occupation: Sales
Age: 42
Gender: Female
Website:
Status: Offline
Joined: Aug 26, 2003
0.00 posts per day
Posts: 23
Points: 758
AIM Address Yahoo Messenger MSN Messenger 
Thanks, I'm sure that'll work perfectly... now I just need to get the text.

*~Jennie~*




_________________
[ Register or login to view links on this board. ] [ Register or login to view links on this board. ]
[ Register or login to view links on this board. ]
Back to top Reply with quote
Display posts from previous:      
Add To: Del.icio.us  Digg  Google  Spurl  Blink  Furl  Y! MyWeb  
<< View previous topic View next topic >>
Post new topicReply to topic

Jump to 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum