Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hover buttons that can change a single image???

Status
Not open for further replies.
WhiteKnight7372001

WhiteKnight7372001

MIS
Oct 23, 2001
8
CA
I'm trying to use mutiply Hover buttons to change a single image. I sure there is a way to do this. I'm just haven't figured out how. I pasted my incorrect code below. Does any one know how to modify it so that it does work??


<html>
<head>
<title>side bar</title>

<SCRIPT language=&quot;JavaScript&quot;>
<!--

if (document.images)
{

image_off= new Image();
image_off.src=&quot;../side/ddplain.gif&quot;;


image1= new Image();
image1.src=&quot; image2= new Image();
image2.src=&quot; image3= new Image();
image3.src=&quot; image4= new Image();
image4.src=&quot; image5= new Image();
image5.src=&quot;
image6= new Image();
image6.src=&quot; image7= new Image();
image7.src=&quot; image8= new Image();
image8.src=&quot; image9= new Image();
image9.src=&quot;
image10= new Image();
image10.src=&quot;image11= new Image();
image11.src=&quot;image12= new Image(); image12.src=&quot;image13= new Image();
image13.src=&quot;image14= new Image();
image14.src=&quot;}


function change(picName,imgName,picName2,imgName2)
{
if (document.images)
{
imgOn=eval(imgName + &quot;.src&quot;);
document[picName].src= imgOn;

imgOn2=eval(imgName2 + &quot;.src&quot;);
document[picName2].src= imgOn2;
}




//-->
</SCRIPT>

<SCRIPT language=&quot;JavaScript&quot;>
<!--
function change2()
{
parent.side_bar.location=&quot;side_barP.html&quot;;
parent.title.location=&quot;resume.html&quot;;
}
//-->
</SCRIPT>

<style type=&quot;text/css&quot;>
<!--
a { color: #CCCCCC; text-decoration: none; font-family: Arial; font-size: 10pt }
a:hover { color: red; text-decoration: none; font-family: Arial; font-size: 10pt }
-->
</style>
</head>

<body bgcolor=&quot;#000066&quot; leftmargin=&quot;0&quot; rightmargin=&quot;0&quot; topmargin=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;>
<table border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;3&quot; frame=&quot;hsides&quot; bordercolor=&quot;#9999CC&quot; width=&quot;100%&quot;>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;title.html&quot; target=&quot;title&quot; onMouseover=&quot;change('pic20','image_off','pic1','image1')&quot; onMouseout=&quot;change('pic20','image_off','pic1','image10')&quot;>
<IMG SRC=&quot; name=&quot;pic1&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;javascript:change2()&quot; onMouseover=&quot;change('pic20','image6','pic2','image2')&quot; onMouseout=&quot;change('pic20','image_off','pic2','image11')&quot;>
<IMG SRC=&quot; name=&quot;pic2&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;Ye_Oscar_Web.doc&quot; target=&quot;new window&quot; onMouseover=&quot;change('pic20',image7','pic3','image3')&quot; onMouseout=&quot;change('pic20','image_off','pic3','image12')&quot;>
<IMG SRC=&quot; name=&quot;pic3&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;confirm.html&quot; target=&quot;title&quot; onMouseover=&quot;change('pic20','image8','pic4','image4')&quot; onMouseout=&quot;change('pic20','image_off','pic4','image13')&quot;>
<IMG SRC=&quot; name=&quot;pic4&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;contact.html&quot; target=&quot;title&quot; onMouseover=&quot;change('pic20','image9','pic5','image5')&quot; onMouseout=&quot;change('pic20','image_off','pic5','image14')&quot;>
<IMG SRC=&quot; name=&quot;pic5&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr height=&quot;1000&quot;>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<br>
<img src=&quot;side/ddplain.gif&quot; name=&quot;pic20&quot;>


<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

</td>
</tr>




</table>
</body>
</html>
 
Sort by date Sort by votes
I condensed the code so that it's alot easier to read - sorry for the first one..

<html>
<head>
<title>side bar</title>

<SCRIPT language=&quot;JavaScript&quot;>
<!--

if (document.images)
{

image_off= new Image();
image_off.src=&quot;../side/ddplain.gif&quot;;

image1= new Image();
image1.src=&quot;../side/homeONN.gif&quot;;
image2= new Image();
image2.src=&quot;../side/resume1ONN.gif&quot;;

image6= new Image();
image6.src=&quot;../side/ddresume1.gif&quot;;
image7= new Image();
image7.src=&quot;../side/ddresume2.gif&quot;;

image10= new Image();
image10.src=&quot;../side/homeOFF.gif&quot;;

image11= new Image();
image11.src=&quot;../side/resume1OFF.gif&quot;;
}

function change(picName,imgName,picName2,imgName2)
{
if (document.images)
{
imgOn=eval(imgName + &quot;.src&quot;);
document[picName].src= imgOn;

imgOn2=eval(imgName2 + &quot;.src&quot;);
document[picName2].src= imgOn2;
}
//-->
</SCRIPT>
</head>

<body>
<table>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;title.html&quot; target=&quot;title&quot; onMouseover=&quot;change('pic20','image_off','pic1','image1')&quot; onMouseout=&quot;change('pic20','image_off','pic1','image10')&quot;>
<IMG SRC=&quot; name=&quot;pic1&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;title.html&quot; onMouseover=&quot;change('pic20','image6','pic2','image2')&quot; onMouseout=&quot;change('pic20','image_off','pic2','image11')&quot;>
<IMG SRC=&quot;../side/resume1OFF.gif&quot; name=&quot;pic2&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<A HREF=&quot;Ye_Oscar_Web.doc&quot; target=&quot;new window&quot; onMouseover=&quot;change('pic20',image7','pic3','image3')&quot; onMouseout=&quot;change('pic20','image_off','pic3','image12')&quot;>
<IMG SRC=&quot;../side/resume2OFF.gif&quot; name=&quot;pic3&quot; width=&quot;125&quot; height=&quot;15&quot; border=&quot;0&quot;></A>
</td>
</tr>

<tr height=&quot;1000&quot;>
<td align=&quot;center&quot; bgcolor=&quot;#000033&quot;>
<br>
<img src=&quot;side/ddplain.gif&quot; name=&quot;pic20&quot;>

</td>
</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
the only thing is when you're trying to preload your images, you have not document object yet (it is in the very begining of your page)

try to call your preloader onload:

onload=function(){
if (document.images){
//...blah blah
}
}

then, in the swaper function:

//for ie, ns4x
document.images[picName].src= imgOn;
//or for ie5+ & ns6:
//document.getElementById(picName).src = imgOn; Victor
 
Upvote 0 Downvote
hie
how doesn't it work?
woo.. i meant what error(s) do you get? on what pieces of code?

try to alert imgOn.src before assigning it to any of images..
Victor
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Locked
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
390
gmmastros
gmmastros
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
719
rogerte
rogerte
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
805
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top