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

swapping 2 images that are links 1

Status
Not open for further replies.
hablablow

hablablow

Programmer
Sep 9, 2000
115
FR
I have two images A and B and two rollovers A' and B' , in diffrent cells.
When the mouses pases over A it becomes A' AND AT THE SAME TIME B becomes B'.
I can i reverse this action ? I want:
B to become B' AND AT THE SAME TIME A to become A'.
The two images have to be links.
Does anyone knows the answer ? [sig][/sig]
 
Sort by date Sort by votes
I think this is what you want. If not let me know. You could also encapsulate a bunch of different operations together by calling javascript functions rather than putting them all within the img tag.

Hope it helps,
Rob

Code: 
<html>
<body>
<a href=&quot;gothere1.html&quot;>
 <img id=&quot;btnA&quot; src=&quot;a1.gif&quot; alt=&quot;Button A1&quot; onMouseOver=&quot;this.src='a2.gif';btnB.src='b2.gif'&quot; onMouseOut=&quot;this.src='a1.gif';btnB.src='b1.gif'&quot; border=0>
</a>
<br>
<a href=&quot;gothere2.html&quot;>
 <img id=&quot;btnB&quot; src=&quot;b1.gif&quot; alt=&quot;Button B1&quot; onMouseOver=&quot;this.src='b2.gif';btnA.src='a2.gif'&quot; onMouseOut=&quot;this.src='b1.gif';btnA.src='a1.gif'&quot; border=0>
</a>
<body>
</html>
[sig][/sig]
 
Upvote 0 Downvote
Thanks Rob for your reaction, I didn't imagine this question could generate feedback.
Your answer is not very clear for my basic skills in javascript but i will try hard
to make it come alive. I think your idea is to swap two images in the same onMouseOver action.
I don't know maybie you can switch to this adress to have a graphic example of my problem.
On this page the first image is the mouth the second the number &quot;two&quot;. I can easely understand this part of the script. My problem comes when i want to have a link on this second image &quot;two&quot; that swaps into &quot;one&quot; and the mouth that swaps into the tongue, at the same time.
Here is the adress: Maybie the answer is under my eyes and it is just an ability to be logic with 4 variables.
Anyway thanks again for your answer.
[sig][/sig]
 
Upvote 0 Downvote
Yes, switch two (or twenty) images in the same mouseover action. The more complex you get the more you need to think about encapsulation (all switches in functions (my term)). Consider...

Code: 
<html>
<head>
<script language=&quot;javascript&quot;>
 function fnSwapMouthNumber(type){
  if (type==1){
   mouth.src='mouth2.gif';
   number2.src='number1.gif';}
  else{
   mouth.src='mouth1.gif';
   number2.src='number2.gif';}
 }
</script>
</head>
<body>
<img src=&quot;mouth1.gif&quot; id=&quot;mouth&quot; onMouseOver=&quot;fnSwapMouthNumber(1)&quot; onMouseOut=&quot;fnSwapMouthNumber(0)&quot; border=0>
<br>
<img src=&quot;number2.gif&quot; id=&quot;number2&quot; border=0>
</body>
</html>

Hopefully this code is clearer. It is a working example (just come up with gifs named mouth1, mouth2, number1, number2). Note the &quot;id=&quot; in each img tag. This is how javascript knows which image to use. I used the &quot;type&quot; variable and if-else statement to cut down on the number of functions required. If I understand you correctly the page you reference is one you found and are trying to follow the code on. Don't get confused by the eval and new Image statements. The eval statement is used (in this case) to make it easier to change a sequence of images (image01.gif, image02.gif, etc) while the new Image statement is used to preload the image (study up on this).

Hope this helps,
Rob [sig][/sig]
 
Upvote 0 Downvote
Rob your script works perfectly and i am near my goals thanks to your help.
But, as the script works with explorer it does not on Netscape.
Netscape is acccepting it, i have no script error message, but nothing swaps within the images.
Is there a posibility to have the script work on both navigators ?
About the &quot;new image&quot; statement does it work with the &quot;onload&quot; function ?
Where do i place this new image statement: i tryed to put it before mouth.src as following:

function fnSwapMouthNumber(type){
if (type==1){
mouth=new image ();
mouth.src='mouth2.gif';
number2=new image ();
number2.src='number1.gif';}
else{
mouth=new image ();
mouth.src='mouth1.gif';
number2=new image ();
number2.src='number2.gif';}
in association with an onload script i generaly use to preload my images in the browsers cache, and of course it doesn't work.....
Hope this makes sense. [sig][/sig]
 
Upvote 0 Downvote
Cross browser code...

Code: 
<html>
<head>
<script language=&quot;javascript&quot;>
 var IE = document.all
 function fnSwapMouthNumber(type){
  if (type==1){
   if (!IE){
    document.mouth.src='mouth2.gif';
    document.number2.src='number1.gif';}
   else{
    mouth.src='mouth2.gif';
    number2.src='number1.gif';}}
	else{
	 if (!IE){
    document.mouth.src='mouth1.gif';
    document.number2.src='number2.gif';}
   else{
    mouth.src='mouth1.gif';
    number2.src='number2.gif';}}
 }
</script>
</head>
<body>
<img src=&quot;mouth1.gif&quot; id=&quot;mouth&quot; onMouseOver=&quot;fnSwapMouthNumber(1)&quot; onMouseOut=&quot;fnSwapMouthNumber(0)&quot; border=0>
<br>
<img src=&quot;number2.gif&quot; id=&quot;number2&quot; border=0>
</body>

Pre-cache your images outside of the onMouseOver routines. Pre-cache simply means to put the images on the local hard-drive for quick load at mouseover time so you have to pre-cache first. If you put your script tags above your body tag it will process first. Simply precache using modified new Image statements found on the page you referenced. Call it as a function for ease of reading.

Rob [sig][/sig]
 
Upvote 0 Downvote
The cross browser code doesn't work on netscape as described before.
I understand the orders for IE in the var
variable and the difference between the
document type and the non ones.
But there seem to be no order for netscape, the document. files are for IE right ?
If IE then use the images with document.src
Else use the others for netscape, right ?
But it doesn't work.
Here comes my adaptation of your instructions:

<HEAD>
<SCRIPT LANGUAGE=&quot;javascript&quot;>
<!-- Hide from old browsers
var IE = document.all
function fnSwapNumber(type){
if (type==1){
if (!IE){
document.design.src='pageint/roll_design.gif;
document.web.src='pageint/roll_web.gif';}
else{
design.src='pageint/roll_design.gif';
web.src='pageint/roll_web.gif';}}
else{
if (!IE){
document.design.src='pageint/design.gif';
document.web.src='pageint/web.gif';}
else{
design.src='pageint/design.gif';
web.src='pageint/web.gif';}}
}
// -->
</SCRIPT>

</HEAD>

<BODY>
<TD><A HREF=&quot;#&quot;><IMG SRC=&quot;pageint/design.gif&quot; name=&quot;design&quot; ONMOUSEOVER=&quot;fnSwapNumber(1)&quot; ONMOUSEOUT=&quot;fnSwapNumber(0)&quot; ONLOAD=&quot;&quot; BORDER=&quot;0&quot;</A></TD>
<TD><A HREF=&quot;#&quot;><IMG SRC=&quot;pageint/web.gif&quot; name=&quot;web&quot; ONMOUSEOVER=&quot;fnSwapNumber(1)&quot; ONMOUSEOUT=&quot;fnSwapNumber(0)&quot; ONLOAD=&quot;&quot; BORDER=&quot;0&quot;></A></TD>
</BODY>

I am just thinking that the problem could be
that my images are in diferent cells of a table.
Thanks again for the feedback.
Hablablow. [sig][/sig]
 
Upvote 0 Downvote
You have to use proper syntax in netscape to get it to work as it is more picky. The main problem was the lack of <table><tr></tr></table> tags to open and close the table properly. below is your script (slightly modified for syntax) that works...

Code: 
<html>
<head>
<script language=&quot;javascript&quot;>
<!-- Hide from old browsers 
var IE = document.all
function fnSwapNumber(type){
if (type==1){
if (!IE){
document.design.src=&quot;pageint/roll_design.gif&quot;;
document.web.src=&quot;pageint/roll_web.gif&quot;;}
else{
design.src=&quot;pageint/roll_design.gif&quot;;
web.src=&quot;pageint/roll_web.gif&quot;;}}    
else{
if (!IE){
document.design.src=&quot;pageint/design.gif&quot;;
document.web.src=&quot;pageint/web.gif&quot;;}
else{    
design.src=&quot;pageint/design.gif&quot;;
web.src=&quot;pageint/web.gif&quot;;}}
     }
// -->   
</script>

</head>

<body>
<table><tr>
<td><a href=&quot;#&quot;><img src=&quot;pageint/design.gif&quot; name=&quot;design&quot; onmouseover=&quot;fnSwapNumber(1)&quot; onmouseout=&quot;fnSwapNumber(0)&quot; onload=&quot;&quot; border=&quot;0&quot;</a></td>
<td><a href=&quot;#&quot;><img src=&quot;pageint/web.gif&quot; name=&quot;web&quot; onmouseover=&quot;fnSwapNumber(1)&quot; onmouseout=&quot;fnSwapNumber(0)&quot; onload=&quot;&quot; border=&quot;0&quot;></a></td>
</tr></table>
</body>
</html>
[sig][/sig]
 
Upvote 0 Downvote
No, no it is a misunderstanding Rob. The code i gve you yesterday was only a shortcut
of the original one wich has everything to please netscape tables cells etc...
The problem stays in the Js itself. If in the body, then it might be the place you put
the onload and offload function i generaly put in the Href tag ( i tryed but did not work).
Consider if you want my previous message the same as the description of my problem for the Js.
Hablablow. [sig][/sig]
 
Upvote 0 Downvote
the problem remains the same
need some advice.
Hablablow [sig][/sig]
 
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
499
rogerte
rogerte
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
156
mayamanako
mayamanako
ahmedsa2018
  • Locked
  • Question
How to make function give row that have different value with color red to full row ?
Replies
1
Views
116
feherke
feherke
lupidol
  • Locked
  • Question
Alternate images not working
Replies
2
Views
85
lupidol
lupidol
c0deM0nK424
  • Locked
  • Question
drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ? 1
Replies
5
Views
175
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top