What's Here?

Members: 86,371
Replies: 356,803
Topics: 52,325
Snippets: 1,779
Tutorials: 423
Total Online: 1,472
Members: 33
Guests: 1,439

JavaScript

Welcome to Dream.In.Code
	Getting Help is Easy! Join 86,371 Programmers. There are 1,472 online right now! Ask your question and get quick answers from Dream.In.Code experts. Join the #1 programming help community on the internet! Registration is fast and FREE... Join Now! Chat LIVE With a Expert Powered by LivePerson.com Register to Make This Box Go Away!

Displaying both text and image on mouseover of image (using a function

Displaying both text and image on mouseover of image (using a function, mouseover function change image and text

Options

pantherscheerleader89	28 Apr, 2008 - 03:02 PM Post #1
New D.I.C Head Joined: 28 Apr, 2008 Posts: 3	Hey everyone ! I am not very advanced in programing and am having trouble creating a javascript function inside of an Html page. I have two images side by side, and when there is a mouseover on one of the images i want the image to switch to a different image and want new text to be displayed underneath. It took me about 12 hours to write the code below and it works to switch the image with another one on mouse over but i can't get the text to work. so i'm trying to make the function display the text at the bottom of the page (<p>) when mouseover and display no text when Mouse out (for 2 different images) thanks for any help in advance . <HTML><HEAD><TITLE>Woman's Lifecycle</TITLE> <META content="text/html; charset=windows-1252" http-equiv=Content-Type> </HEAD> <script LANGUAGE="JavaScript"> //first Image1= new Image(66,200) Image1.src = "line01x.gif" Image2 = new Image(324,200) Image2.src = "line01.gif" function MOver() { document.imageflipper.src = Image1.src; return true; } function MOut() { document.imageflipper.src = Image2.src; return true; } //second purple1= new Image(66,200) purple1.src = "line02x.gif" purple2 = new Image(66,200) purple2.src = "line02.gif" function MOver2() { document.PURPLE.src = purple1.src; return true; } function MOut2() { document.PURPLE.src = purple2.src; return true; } </SCRIPT> </HEAD> <TBODY> <IMG NAME="imageflipper" SRC="line01.gif" onMouseOver="MOver()" onMouseOut="MOut()"> <IMG NAME="PURPLE" SRC="line02.gif" onMouseOver="purplex()" onMouseOut="purple()"> <p> //where I want the text to appear on mouse over //Ii want different text to be displayed on each image mouse over </P> </BODY></HTML> </BODY></HTML>

ahmad_511

28 Apr, 2008 - 04:57 PM

Post #2

D.I.C Regular

Joined: 28 Apr, 2007
Posts: 302

hello there
you can put all you images pathes in array and the corresponing text in another array
on mouse over for each image call a function and pass it the index of the image you want to show, use the same index to show the text

jscript


<html>

<head>
<title>Untitled 1</title>
<script>
imageOverArr=new Array("b1.gif","b2.gif");
imageOutArr=new Array("c1.gif","c2.gif");
textArr=new Array("hello your mouse is over b1","hello your mouse is over b2");
function mouseOver(obj,num){
obj.src=imageOverArr[num];
document.getElementById("myText").innerHTML=textArr[num];
}
function mouseOut(obj,num){
obj.src=imageOutArr[num]
document.getElementById("myText").innerHTML="";
}

</script>
</head>

<body>

<img src="c1.GIF" onmouseover="mouseOver(this,0)" onmouseout="mouseOut(this,0)" width="15" height="15">
<img src="c2.GIF" onmouseover="mouseOver(this,1)" onmouseout="mouseOut(this,1)" width="12" height="12">
<p id="myText"></p>
</body>

</html>

take a look at the attached file

imageSwitch.zip ( 2.77k ) Number of downloads: 20

and i'm sure there are another ways to accomplish that..

Good Luck

Not The Right Answer?

Ask an Expert Now...
Join For Free!

Dream.In.Code has thousands of experts online right now to answer your question! Registration is FREE! Join one of the largest programming and web development communities on the internet. You'll have instant access to hundreds of tutorials and thousands of code snippets.

Register for Free to Make This Ad Go Away!

pantherscheerleader89	28 Apr, 2008 - 05:45 PM Post #3
New D.I.C Head Joined: 28 Apr, 2008 Posts: 3	Hey thanks that helped a lot! But there is still one problem. My c1.gif and b1.gif have the same height but different widths, so the function stretches the c1.gif to fit the dimensions of the b1.gif. Any help on how to tweak the code to allow for both dimensions? thanks again in advance. p.s. is there anyway to allow for the textArr=new Array to allow for more text? it seems to stop working after 200 letters or so This post has been edited by pantherscheerleader89: 28 Apr, 2008 - 08:41 PM

ahmad_511	28 Apr, 2008 - 08:41 PM Post #4
D.I.C Regular Joined: 28 Apr, 2007 Posts: 302	Hi again, if you want to use the default images size you can do it easily by removing the height and width properties from the img's tags, like this HTML <img src="c1.GIF" onmouseover="mouseOver(this,0)" onmouseout="mouseOut(this,0)"> <img src="c2.GIF" onmouseover="mouseOver(this,1)" onmouseout="mouseOut(this,1)"> Hope it helps This post has been edited by ahmad_511: 28 Apr, 2008 - 08:42 PM

tri-girl	Yesterday, 10:00 AM Post #5
New D.I.C Head Joined: Yesterday, 09:32 AM Posts: 1	ahmad_511, your post was really helpful for a project I'm working on. I'm pretty new at this, too. Is there a way to use this function and have a line of text present in that same spot when there is no mouseover, and have it switch when you mouseover one of the images? In the example below I want the cell where the onmousover text displays to say "E-ship Program Description" when there is no event, but switch to the Engineering Management Program Description or Deming Center Program Description with a mouseover on the images. Thanks for any help you can provide! CODE <html> <head> <meta http-equiv="Content-Language" content="en-us"> <title>Untitled 1</title> <script> imageOverArr=new Array("EMP_but2.gif","Deming_but2.gif"); imageOutArr=new Array("EMP_but1.gif","Deming_but1.gif"); textArr=new Array("Engineering Management Program Description","Deming Center Program Description"); function mouseOver(obj,num){ obj.src=imageOverArr[num]; document.getElementById("myText").innerHTML=textArr[num]; } function mouseOut(obj,num){ obj.src=imageOutArr[num] document.getElementById("myText").innerHTML=""; } </script> </head> <body> <table width="381" height="138"> <tr> <td style="border-bottom-style: solid; border-bottom-width: 1" height="51" width="190"> <img src="EMP_but1.GIF" onmouseover="mouseOver(this,0)" onmouseout="mouseOut(this,0)" width="150" height="50" align="left"></td> <td style="border-bottom-style: solid; border-bottom-width: 1" height="51" width="191"> <img src="Deming_but1.GIF" onmouseover="mouseOver(this,1)" onmouseout="mouseOut(this,1)" width="150" height="50" align="right"></td> </tr> <tr> <td colspan="2" bordercolor="#000000" style="border-style: solid; border-width: 1" bgcolor="#C0C0C0" height="70" width="399"> <p id="myText" style="margin-left: 5; margin-right: 5"></p> </td> </tr> <tr> <td style="border-top-style: solid; border-top-width: 1" height="19" width="190"> </td> <td style="border-top-style: solid; border-top-width: 1" height="19" width="191"> </td> </tr> </table> </body> </html>