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

text hovers that control image swaps

Status
Not open for further replies.
IndustriousBird

IndustriousBird

Technical User
Oct 30, 2002
6
US
I am trying to create 4 separate text hovers that cause the same image to change. There are 5 images total- the main image, plus the other four that correspond to each text link. Basically, I have a stylized image of four people. My goal is that each person's image should come to the forefront when their name is moused over on a different part of the page. I found a script that works- but I don't know how to make it work 3 more times! I want to add three more images. Does anyone know how to do this? Any help would be greatly appreciated! Here is the code i have so far.., (with the script working for the first image...) The other three images that I want to add are called
"img/neon_greg.jpg"
"img/neon_steve.jpg"
"img/neon_dillon.jpg"
each of these images would correspond to their relative text links.. ie) "img/neon_dillon" should show up when a user mouses over the words "Dillon Westbrook!"
---------------

<script language=&quot;JavaScript&quot;>
<!-- Hide the script from old browsers --
img0_on = new Image();
img0_on.src=&quot;img/neon_justine.jpg&quot;;
img0_off = new Image();
img0_off.src=&quot;img/neon_vermouth.jpg&quot;;
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + &quot;_on.src&quot;);
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + &quot;_off.src&quot;);
}
// End Hiding Here -->
</script>

</head>

<body bgcolor=&quot;000000&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;500&quot; height=&quot;382&quot; background=&quot;img/players_page.jpg&quot;>
<tr>
<td width=&quot;41&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;41&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;165&quot;>
<tr bgcolor=&quot;#000000&quot;>
<td width=&quot;15&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;10&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td colspan=&quot;2&quot; width=&quot;400&quot; height=&quot;164&quot;><img src=&quot;img/neon_vermouth.jpg&quot; name=&quot;img0&quot; width=&quot;400&quot; height=&quot;164&quot; border=&quot;0&quot;></td>
</tr>
</table>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;177&quot;>
<tr>
<td colspan=&quot;3&quot; align=&quot;center&quot;><span class=&quot;heading&quot;>Vermouth is...</span></td>
</tr>
<tr>
<td width=&quot;30&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;30&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><a href=&quot;players.html&quot; onmouseover=&quot;over_image('img0');&quot;
onmouseout=&quot;off_image('img0')&quot; class=&quot;songtitle&quot;>Justine Kragen</a></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Vocals/Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot;>Steve McDonald</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot;>Greg Weber</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Trumpet/Guitar/Bass/Vocals</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot;>Dillon Westbrook</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Drums/Vocals</span></td>
</tr>
<tr>
<td width=&quot;1&quot; height=&quot;20&quot;><img src=&quot;img/x.gif&quot; width=&quot;1&quot; height=&quot;20&quot; border=&quot;0&quot;></td>
</tr>
</table>
</td>
<td width=&quot;40&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;40&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
</tr>
</table>

 
Sort by date Sort by votes
Try this, I haven't checked it or spent very long thinking about it but it looks quite straight forward.

<script language=&quot;JavaScript&quot;>
<!-- Hide the script from old browsers --
img0_on = new Image();
img0_on.src=&quot;img/neon_justine.jpg&quot;;
img0_off = new Image();
img0_off.src=&quot;img/neon_vermouth.jpg&quot;;
img1_on = new Image();
img1_on.src=&quot;img/neon_greg.jpg&quot;;
img2_on = new Image();
img2_on.src=&quot;img/neon_steve.jpg&quot;;
img3_on = new Image();
img3_on.src=&quot;img/neon_dillon.jpg&quot;;
function over_image(parm_name)
{
document[parm_name].src = eval(parm_name + &quot;_on.src&quot;);
}
function off_image(parm_name)
{
document[parm_name].src = eval(parm_name + &quot;_off.src&quot;);
}
// End Hiding Here -->
</script>

</head>

<body bgcolor=&quot;000000&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;500&quot; height=&quot;382&quot; background=&quot;img/players_page.jpg&quot;>
<tr>
<td width=&quot;41&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;41&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;165&quot;>
<tr bgcolor=&quot;#000000&quot;>
<td width=&quot;15&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;10&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td colspan=&quot;2&quot; width=&quot;400&quot; height=&quot;164&quot;><img src=&quot;img/neon_vermouth.jpg&quot; name=&quot;img0&quot; width=&quot;400&quot; height=&quot;164&quot; border=&quot;0&quot;></td>
</tr>
</table>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;177&quot;>
<tr>
<td colspan=&quot;3&quot; align=&quot;center&quot;><span class=&quot;heading&quot;>Vermouth is...</span></td>
</tr>
<tr>
<td width=&quot;30&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;30&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><a href=&quot;players.html&quot; onmouseover=&quot;over_image('img0');&quot;
onmouseout=&quot;off_image('img0')&quot; class=&quot;songtitle&quot;>Justine Kragen</a></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Vocals/Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img2');&quot;
onmouseout=&quot;off_image('img0')&quot;>Steve McDonald</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img1');&quot;
onmouseout=&quot;off_image('img0')&quot;>Greg Weber</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Trumpet/Guitar/Bass/Vocals</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img3');&quot;
onmouseout=&quot;off_image('img0')&quot;>Dillon Westbrook</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Drums/Vocals</span></td>
</tr>
<tr>
<td width=&quot;1&quot; height=&quot;20&quot;><img src=&quot;img/x.gif&quot; width=&quot;1&quot; height=&quot;20&quot; border=&quot;0&quot;></td>
</tr>
</table>
</td>
<td width=&quot;40&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;40&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
</tr>
</table>
 
Upvote 0 Downvote
Thanks for your suggestion!

I tried this before and I just tried your code but it still creates errors.. &quot;Document [...] is null or not an object&quot; Code &quot;0&quot; The first one continues to work, but the other three fail!
 
Upvote 0 Downvote
Hi Industriousbird,
Try the modified code , hope it will help [bigcheeks]

<script language=&quot;JavaScript&quot;>
<!-- Hide the script from old browsers --
img0_on = new Image();
img0_on.src=&quot;img/neon_justine.jpg&quot;;
img0_off = new Image();
img0_off.src=&quot;img/neon_vermouth.jpg&quot;;
img1_on = new Image();
img1_on.src=&quot;img/neon_greg.jpg&quot;;
img2_on = new Image();
img2_on.src=&quot;img/neon_steve.jpg&quot;;
img3_on = new Image();
img3_on.src=&quot;img/neon_dillon.jpg&quot;;

function over_image(parm_name)
{
var _tmpVar = document.getElementById(&quot;_img&quot;)
_tmpVar.src = eval(parm_name + &quot;_on.src&quot;);
}
function off_image(parm_name)
{
var _tmpVar = document.getElementById(&quot;_img&quot;)
_tmpVar.src = eval(parm_name + &quot;_off.src&quot;);
}
// End Hiding Here -->
</script>

</head>

<body bgcolor=&quot;000000&quot;>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;500&quot; height=&quot;382&quot; background=&quot;img/players_page.jpg&quot;>
<tr>
<td width=&quot;41&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;41&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;165&quot;>
<tr bgcolor=&quot;#000000&quot;>
<td width=&quot;15&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;10&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td colspan=&quot;2&quot; width=&quot;400&quot; height=&quot;164&quot;><img id=&quot;_img&quot; src=&quot;img/neon_vermouth.jpg&quot; name=&quot;_img&quot; width=&quot;400&quot; height=&quot;164&quot; border=&quot;0&quot;></td>
</tr>
</table>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;5&quot; align=&quot;center&quot; width=&quot;418&quot; height=&quot;177&quot;>
<tr>
<td colspan=&quot;3&quot; align=&quot;center&quot;><span class=&quot;heading&quot;>Vermouth is...</span></td>
</tr>
<tr>
<td width=&quot;30&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;30&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><a href=&quot;players.html&quot; onmouseover=&quot;over_image('img0');&quot;
onmouseout=&quot;off_image('img0')&quot; class=&quot;songtitle&quot;>Justine Kragen</a></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Vocals/Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img2');&quot;
onmouseout=&quot;off_image('img0')&quot;>Steve McDonald</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Guitar/Bass</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img1');&quot;
onmouseout=&quot;off_image('img1')&quot;>Greg Weber</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Trumpet/Guitar/Bass/Vocals</span></td>
</tr>
<tr>
<td width=&quot;5&quot; height=&quot;1&quot;><img src=&quot;img/x.gif&quot; width=&quot;5&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
<td width=&quot;175&quot; valign=&quot;top&quot;><span class=&quot;heading&quot; onmouseover=&quot;over_image('img3');&quot;
onmouseout=&quot;off_image('img0')&quot;>Dillon Westbrook</span></td>
<td valign=&quot;top&quot;><span class=&quot;content&quot;>Drums/Vocals</span></td>
</tr>
<tr>
<td width=&quot;1&quot; height=&quot;20&quot;><img src=&quot;img/x.gif&quot; width=&quot;1&quot; height=&quot;20&quot; border=&quot;0&quot;></td>
</tr>
</table>
</td>
<td width=&quot;40&quot; height=&quot;0&quot;><img src=&quot;img/x.gif&quot; width=&quot;40&quot; height=&quot;1&quot; border=&quot;0&quot;></td>
</tr>
Experience teaches slowly and at the cost of mistakes [pipe]
 
Upvote 0 Downvote
Alternatively make

document[parm_name].src = eval(parm_name + &quot;_on.src&quot;);

read

document.img0.src = eval(parm_name + &quot;_on.src&quot;);

in the script.

Just a warning if you use the code given by Raxg there is an 'img1' in a mouseout that needs changing to 'img0'

Hope this one is sorted now
 
Upvote 0 Downvote
Thank you MrGtheBeast and Raxg!

It works! Now if only my picture was in focus! but that's another story...

I'll post the link when i launch the site (very soon) so you guys can see what you have helped to create!

-IndustriousBird!


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
751
rogerte
rogerte
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
578
waubain
waubain
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
282
amrmnabil
amrmnabil
chillay
  • Locked
  • Question
Add Control + F feature to a Web Page
Replies
3
Views
374
feherke
feherke
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
310
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top