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 Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 image swaps on mouseover, 1 link

Status
Not open for further replies.
code0883

code0883

Programmer
Joined
Oct 5, 2000
Messages
4
Location
US
I'm stumped...I've gotten to where a linking image rolls over and presents another roll-over'd image elsewhere on the page (where it has to be positioned in a <td>; I'm not using div's to position), but the secondary rollover (which, by the way, only presents popup information) doesn't go away onmouseout. Does someone have any code I can &quot;borrow&quot; (or I'll give you credit if you really want it :) ).

Check out for great javascript (which is where I started with this code)! [sig][/sig]
 
Sort by date Sort by votes
Here's what I have for a sample. The two buttons I'm presenting are sequential (3 and 4) in a series of 7 horizontally. Like I said, all images are presenting themselves, but the secondary, description rollovers don't go away onmouseout. The browser &quot;entrance&quot; stuff is what I understand to be the conflict of NN and IE in their up/down, on/out &quot;standards&quot;.

<html>
<head>
<title>multiple rollovers</title>

<script>
<!-- hide
var browser = '';
var entrance = '';
// browsercheck step1
browser = 'one';
// end hide -->
</script>

<script language=JavaScript1.1>
<!-- hide
// browsercheck step2
browser = 'two';
// end hide -->
</script>

<script language=JavaScript1.2>
<!-- hide
// browsercheck step3
browser = 'three';
// end hide -->
</script>

<script language=&quot;JavaScript&quot;>
<!-- hide
if (browser == 'three') entrance = 3;
if (browser == 'two') entrance = 2;
if (browser == 'one') entrance = 1;

function changeon(n){
if (entrance==2 || entrance==3){
if(document.images){
document.images['sq'+n].src= eval(&quot;bsq&quot; + n + &quot;.src&quot;);
document.images['dsq'+n].src= eval(&quot;dsq&quot; + n + &quot;.src&quot;);}}}
function changeout(n){
if (entrance==2 || entrance==3){
if(document.images){
document.images['sq'+n].src= eval(&quot;asq&quot; + n + &quot;.src&quot;);
document.images['dsq'+n].src= eval(&quot;dsq&quot; + n + &quot;.src&quot;);}}}
function changeup(n){
if (entrance==3){
if(document.images){
document.images['sq'+n].src= eval(&quot;bsq&quot; + n + &quot;.src&quot;);}}}

//-->
</script>
<script language=JavaScript>
if(entrance==2)
{ asq3=new Image;
asq3.src=&quot;graphics/nav_legal.jpg&quot;;
bsq3=new Image;
bsq3.src=&quot;graphics/nav_legal_over.jpg&quot;;
dsq3=new Image;
dsq3.src=&quot;graphics/box3_over.jpg&quot;;

asq4=new Image;
asq4.src=&quot;graphics/nav_engineering.jpg&quot;;
bsq4=new Image;
bsq4.src=&quot;graphics/nav_engineering_over.jpg&quot;;
dsq4=new Image;
dsq4.src=&quot;graphics/box4_over.jpg&quot;;}
if(entrance==3)
{ asq3=new Image;
asq3.src=&quot;graphics/nav_legal.jpg&quot;;
bsq3=new Image;
bsq3.src=&quot;graphics/nav_legal_over.jpg&quot;;
dsq3=new Image;
dsq3.src=&quot;graphics/box3_over.jpg&quot;;

asq4=new Image;
asq4.src=&quot;graphics/nav_engineering.jpg&quot;;
bsq4=new Image;
bsq4.src=&quot;graphics/nav_engineering_over.jpg&quot;;
dsq4=new Image;
dsq4.src=&quot;graphics/box4_over.jpg&quot;;}
</script>
</head>
<body bgcolor=&quot;#336699&quot; topmargin=&quot;0&quot; leftmargin=&quot;0&quot; marginheight=&quot;0&quot; marginwidth=&quot;0&quot;>
<table width=&quot;179&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; height=&quot;30&quot;>
<tr valign=&quot;top&quot;>
<td width=&quot;97&quot; align=&quot;left&quot; valign=&quot;top&quot;>
<a href=&quot;legal.html&quot;
onmouseover=&quot;changeon(3); window.status='Patent/Legal'; return true;&quot;
onmouseout=&quot;changeout(3); window.status='';return true&quot;;
onmousedown=&quot;changedn(3); return true;&quot;
onmouseup=&quot;changeup(3); return true;&quot;>
<img src=&quot;graphics/nav_legal.jpg&quot; alt=&quot;Patent/Legal&quot; border =&quot;0&quot; width=&quot;97&quot; height=&quot;30&quot; name=sq3></a></TD>
<td width=&quot;99&quot; align=&quot;left&quot; valign=&quot;top&quot;>
<a href=&quot;engineering.html&quot;
onmouseover=&quot;changeon(4); window.status='Engineering'; return true;&quot;
onmouseout=&quot;changeout(4); window.status='';return true;&quot;
onmousedown=&quot;changedn(4); return true;&quot;
onmouseup=&quot;changeup(4); return true;&quot;>
<img src=&quot;graphics/nav_engineering.jpg&quot; alt=&quot;Engineering&quot; border =&quot;0&quot; width=&quot;99&quot; height=&quot;30&quot; name=sq4></a>
</TD></tr></table>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; background=&quot;graphics/bottom.jpg&quot; height=&quot;301&quot;>
<tr valign=&quot;top&quot;>
<td valign=&quot;top&quot; width=&quot;97&quot;><onmouseover=&quot;; return true;&quot; onmouseout=&quot;; return true;&quot;>
<img src=&quot;graphics/box3.jpg&quot; width=&quot;97&quot; height=&quot;301&quot; border=&quot;0&quot; name=&quot;dsq3&quot;>
</td>
<td valign=&quot;top&quot; width=&quot;82&quot;><onmouseover=&quot;; return true;&quot; onmouseout=&quot;; return true;&quot;>
<img src=&quot;graphics/box4.jpg&quot; width=&quot;99&quot; height=&quot;301&quot; border=&quot;0&quot; name=&quot;dsq4&quot;>
</td></tr></table>
</body>
</html>


Your help is greatly appreciated!!
[sig][/sig]
 
Upvote 0 Downvote
From what I can see, you are not resetting the second image in the 'changeout' function, i.e. the last line of this is the same as the last line of the 'changeon' function.
So it won't have any effect when the onMouseOut event occurs. You need to change this function to reset the relevant image to the original src= value. Thus the last line of function 'changeout' should read:-


document.images['dsq'+n].src= 'graphics/box3.jpg';}}}


for box3 and so on for the others.

Even better would be to preload this image with the others:-


csq3=new Image;
csq3.src=&quot;graphics/box3.jpg&quot;;


and so on for the other box numbers, and then the last line of function 'changeout' can read:-


document.images['dsq'+n].src= eval(&quot;csq&quot; + n + &quot;.src&quot;);}}}


I think that will fix the problem (you may need to do something similar with the 'changeup' and 'changedown' functions but I'm not sure what you're doing with those).

Enjoy :-) [sig][/sig]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question Question
Code that works on Windows, Android and Iphone
Replies
0
Views
913
rogerte
rogerte
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
951
JScannell
JScannell
waubain
  • Locked
  • Question Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined
Replies
2
Views
724
waubain
waubain
Raj Kumar
  • Locked
  • Question Question
Attached Formula image to add in javascript
Replies
1
Views
410
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top