Does any one know what code?

@NickoDec 20.2006

I was wondering… ?
Does anyone know a code that can allow me to:
Make it so that when a viewer of the website holds their cursor over image A, both image A and image B show a roll-over (different ones). Is this possible with JavaScript or do I need some other sort of coding?
I’m pretty new to this so keep it sort of simple please.
I’m using Macromedia Dreamweaver 8 if it means anything.

to post a comment

JavaScript

26 Comments(s) _↴

@NickoauthorDec 20.2006 — #C'mon someone please... You seem to be able to answer [edit] harder [/edit] things than this... Please...

@mjdamatoDec 20.2006 — #C'mon someone please... You seem to be able to answer easier things than this... Please...[/QUOTE]

That logic is not sound. Just because we can answer "easier" questions, does not mean we can answer a more difficult question.

Anyway, have you attempted anything yet? You have not provided enough information to provide a complete solution because there are different approaches based upon how you are setting this up.

Here's ONE example:

function imgSwap(img1, img2) {
 if (document.images) {
 document.getElementById('image1').src = img1;
 document.getElementById('image2').src = img2;
 }
 }

&lt;img src="photo1.jpg" id="image1" onmouseover="imgSwap('photo1_over.jpg','photo2_over.jpg');" onmouseout="imgSwap('photo1.jpg','photo2.jpg');"&gt;
 &lt;img src="photo2.jpg" id="image2"&gt;

@NickoauthorDec 20.2006 — #Thank-you. I think it will work. Like I said, I'm new to Javscripting, I'm more a designer. I'll put it in when I get a chance, thnakyou.

@NickoauthorDec 21.2006 — #OK. It doesn't seem to work (I entered the second one which is similair to Dreamweavers coding).

I explain some more:

I have a large circle in the middle of the screen. Around it sit eight small circles. I used Photoshop and sliced up the image so that each small circle is one its own slice.

We'll take the top small circle and say its the Home one. What I would like to happen is that when you bring the mouse over the Home small circle, it lights up (just another image) and the title of the page it goes to (Home) is displayed on the large circle (once again, just another image). Then, when you move the mouse a way, it goes back to its original form.

I would like the same for each of the eight dots, all pointing to a different page.

Thanks for all your help.

@so_is_thisDec 21.2006 — #You need BOTH of what was posted.

@NickoauthorDec 21.2006 — #Oh. Um, how? Or rather, where?

@so_is_thisDec 21.2006 — #You need to implement your own equivalent versions of what is shown in BOTH code boxes in post #3.

@NickoauthorDec 21.2006 — #Ok I get replacing the file names but.... er... where or what section do I put each of the codes...?

@so_is_thisDec 21.2006 — #Tell you what. Show the two img tags you have now and the rollover functions that go with them.

@NickoauthorDec 21.2006 — #Erm...

Ok. I'm really not good at this. This is the image's code that I want to be the one that causes the rollover (on itself and the big circle):

[CODE]<td rowspan="3">
 <img src="images/circleintro_08.gif" width="69" height="70" alt=""></td>
 <td>[/CODE]

The other images (the title big circle) tag is the same, except a different name, dimentions and position.

I took out the rollovercode because what I did because it did nothing. Could you please tell me from scratch? Thanks. I'm sorry that I'm so novice.

@NickoauthorDec 21.2006 — #Ok. Wait. I've added in a basic rollover effect but just for the small circle. I want it to change the big circle as well as itself. How, what and where do I do that.

Here's what I got for the small circle now:

[CODE]<td rowspan="3">
 <img src="images/circleintro_07.gif" width="1" height="70" alt=""></td>
 <td rowspan="3"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_circle','','images/circleintro_home_08.gif',1)"><img src="images/circleintro_08.gif" name="home_circle" width="69" height="70" border="0"></a></td>
 <td>[/CODE]

@so_is_thisDec 21.2006 — #Ok, of what you posted, I'll presume this (just for demonstration purposes) is what you call the "big" circle:

[code=html]
 <td rowspan="3">
 <img src="images/circleintro_07.gif" width="1" height="70" alt="">
 </td>[/code]

and this is the circle you'll be mousing over:

[code=html]
 <td rowspan="3">
 <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home_circle','','images/circleintro_home_08.gif',1)">
 <img name="home_circle" src="images/circleintro_08.gif" border="0" width="69" height="70">
 </a>
 </td>[/code]

Now, you can't use the DreamWeaver functions for this because they are not designed for dual rollovers. So, you'd change both of the above into this:

[code=html]
 <td rowspan="3">
 <img name="big_circle" src="images/circleintro_07.gif" border="0" width="1" height="70" alt="">
 </td>
 <td rowspan="3">
 <img name="home_circle" src="images/circleintro_08.gif" border="0" width="69" height="70" alt=""
 onMouseOut="MySwapImage(this, 'images/circleintro_08.gif'); return MySwapImage(document.images.big_circle, 'images/circleintro_07.gif');"
 onMouseOver="MySwapImage(this, 'images/circleintro_home_08.gif'); return MySwapImage(document.images.big_circle, 'images/circleintro_home_07.gif');">
 </td>[/code]

and use the following single JavaScript function:

[CODE]
 function MySwapImage(img, src)
 {
 img.src = src;
 return true;
 }[/CODE]

@mjdamatoDec 21.2006 — #@so_is_this:

What are the "returns" in the function and triggers for? Would it not work without those or is it a compatability issue?

And, for this poster's sake, it might make sense to get rid of the function completely:

&lt;td rowspan="3"&gt;
 &lt;img name="big_circle" src="images/circleintro_07.gif" border="0" width="1" height="70" alt=""&gt;
 &lt;/td&gt;
 &lt;td rowspan="3"&gt;
 &lt;img name="home_circle" src="images/circleintro_08.gif" border="0" width="69" height="70" alt=""
 onMouseOut="this.src='images/circleintro_08.gif'; document.images.big_circle.src='images/circleintro_07.gif';"
 onMouseOver="this.src='images/circleintro_home_08.gif'; document.images.big_circle.src='images/circleintro_home_07.gif';"&gt;
 &lt;/td&gt;

@so_is_thisDec 21.2006 — #What are the "returns" in the function and triggers for? Would it not work without those or is it a compatability issue?[/QUOTE]
Good programming practice. All events are supposed to have either a [B]true[/B] or a [B]false[/B] value returned to them. I'm just being consistent with that rule.
And, for this poster's sake, it might make sense to get rid of the function completely:[/QUOTE]
Yep, either way. I was just being more consistent with the original example you gave and with the way DreamWeaver does things.

@NickoauthorDec 22.2006 — #Actually. The large circle pieces are called:

--> images/circleintro_19.gif

--> images/circleintro_22.gif

--> images/circleintro_14.gif

And what they are to be changed to:

--> images/circleintro_home_19.gif

--> images/circleintro_home_22.gif

--> images/circleintro_home_14.gif

Seeing as there are multiple pieces, do I need to just put a comma and type the next one in the right piece of code? I think I can at least figure that out, maybe.

I'll give it a go, and tell you a bit later.

Thanks for your help!

@so_is_thisDec 23.2006 — #No commas. If using the function method I posted, one function call is required for each image you wish to change.

@NickoauthorDec 23.2006 — #Ok. With this bit:

return MySwapImage(document.images.big_circle, 'images/circleintro_home_07.gif');">[/QUOTE]

What do I replace the "document.images.big_circle" part with. Or what part do I change?

@NickoauthorDec 23.2006 — #Ok to #17

@so_is_thisDec 23.2006 — #IMG tags need to be referred to by their [B]name[/B] attribute. So, give each

IMG tag a unique name and use that off the [B]document.images[/B] collection.

You can make the IMG [B]id[/B] and [B]name[/B] equal to satisfy other code.

@NickoauthorDec 23.2006 — #Ok.

@NickoauthorDec 29.2006 — #Ok. I must appear really, really stupid. No, I am stupid. I can't get my head around this. I'm not a JavaScript genius, I'm a 13 year old kid who decided to get a webpage (http://www.wider-angle.com) and wants to do something with it. I have Dreamweaver 8 and have used Photoshop CS to create image and ImageReady CS to slice that image. Here is my code for my entire page as it should be when it starts off:

[CODE]
 <html>
 <head>
 <title>circleintro</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/JavaScript">
 <!--
 function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
 }
 
 function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
 }
 
 function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
 }
 
 function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
 if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
 }
 //-->
 </script>
 </head>
 <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/circleintro_home_08.gif')">
 <!-- ImageReady Slices (circleintro.psd) -->
 <table id="Table_01" width="501" height="501" border="0" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="9" rowspan="3">
 <img src="images/circleintro_01.gif" width="213" height="71" alt=""></td>
 <td>
 <img src="images/circleintro_02.gif" width="1" height="18" alt=""></td>
 <td>
 <img src="images/circleintro_03.gif" width="69" height="18" alt=""></td>
 <td rowspan="5">
 <img src="images/circleintro_04.gif" width="1" height="89" alt=""></td>
 <td colspan="7" rowspan="3">
 <img src="images/circleintro_05.gif" width="216" height="71" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="18" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/circleintro_06.gif" width="70" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td rowspan="3">
 <img src="images/circleintro_07.gif" width="1" height="70" alt=""></td>
 <td rowspan="3"><img src="images/circleintro_08.gif" width="69" height="70"></td>
 <td>
 <img src="images/spacer.gif" width="1" height="52" alt=""></td>
 </tr>
 <tr>
 <td colspan="2" rowspan="6">
 <img src="images/circleintro_09.gif" width="71" height="142" alt=""></td>
 <td rowspan="4">
 <img src="images/circleintro_10.gif" width="1" height="71" alt=""></td>
 <td rowspan="4">
 <img src="images/circleintro_11.gif" width="8" height="71" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_12.gif" width="62" height="1" alt=""></td>
 <td colspan="2" rowspan="2">
 <img src="images/circleintro_13.gif" width="71" height="18" alt=""></td>
 <td rowspan="17">
 <img src="images/circleintro_14.gif" width="70" height="429" alt=""></td>
 <td colspan="3" rowspan="5">
 <img src="images/circleintro_15.gif" width="71" height="72" alt=""></td>
 <td colspan="3" rowspan="6">
 <img src="images/circleintro_16.gif" width="75" height="142" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="3" rowspan="3">
 <img src="images/circleintro_17.gif" width="62" height="70" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="17" alt=""></td>
 </tr>
 <tr>
 <td rowspan="2">
 <img src="images/circleintro_18.gif" width="1" height="53" alt=""></td>
 <td rowspan="15">
 <img src="images/circleintro_19.gif" width="70" height="411" alt=""></td>
 <td colspan="2">
 <img src="images/circleintro_20.gif" width="70" height="1" alt=""></td>
 <td rowspan="10">
 <img src="images/circleintro_21.gif" width="1" height="328" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="2" rowspan="7">
 <img src="images/circleintro_22.gif" width="70" height="317" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="52" alt=""></td>
 </tr>
 <tr>
 <td colspan="4">
 <img src="images/circleintro_23.gif" width="62" height="1" alt=""></td>
 <td colspan="2" rowspan="4">
 <img src="images/circleintro_24.gif" width="10" height="212" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="4">
 <img src="images/circleintro_25.gif" width="62" height="70" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_26.gif" width="71" height="70" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="70" alt=""></td>
 </tr>
 <tr>
 <td rowspan="11">
 <img src="images/circleintro_27.gif" width="18" height="287" alt=""></td>
 <td colspan="4">
 <img src="images/circleintro_28.gif" width="72" height="70" alt=""></td>
 <td rowspan="2">
 <img src="images/circleintro_29.gif" width="43" height="141" alt=""></td>
 <td colspan="2" rowspan="2">
 <img src="images/circleintro_30.gif" width="54" height="141" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_31.gif" width="70" height="70" alt=""></td>
 <td rowspan="11">
 <img src="images/circleintro_32.gif" width="22" height="287" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="70" alt=""></td>
 </tr>
 <tr>
 <td colspan="4">
 <img src="images/circleintro_33.gif" width="72" height="71" 
 [/CODE]

PLEASE SEE NEXT POST FOR REST OF MESSAGE

@NickoauthorDec 29.2006 — #CONTINUED...

[CODE]
 alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_34.gif" width="70" height="71" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="71" alt=""></td>
 </tr>
 <tr>
 <td rowspan="9">
 <img src="images/circleintro_35.gif" width="53" height="146" alt=""></td>
 <td rowspan="5">
 <img src="images/circleintro_36.gif" width="1" height="71" alt=""></td>
 <td rowspan="5">
 <img src="images/circleintro_37.gif" width="8" height="71" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_38.gif" width="62" height="1" alt=""></td>
 <td rowspan="5">
 <img src="images/circleintro_39.gif" width="1" height="71" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_40.gif" width="71" height="1" alt=""></td>
 <td rowspan="4">
 <img src="images/circleintro_41.gif" width="1" height="63" alt=""></td>
 <td rowspan="9">
 <img src="images/circleintro_42.gif" width="52" height="146" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="3" rowspan="4">
 <img src="images/circleintro_43.gif" width="62" height="70" alt=""></td>
 <td rowspan="4">
 <img src="images/circleintro_44.gif" width="1" height="70" alt=""></td>
 <td colspan="2" rowspan="4">
 <img src="images/circleintro_45.gif" width="70" height="70" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="52" alt=""></td>
 </tr>
 <tr>
 <td rowspan="5">
 <img src="images/circleintro_46.gif" width="1" height="71" alt=""></td>
 <td>
 <img src="images/circleintro_47.gif" width="69" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td rowspan="4">
 <img src="images/circleintro_48.gif" width="69" height="70" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="9" alt=""></td>
 </tr>
 <tr>
 <td rowspan="3">
 <img src="images/circleintro_49.gif" width="1" height="61" alt=""></td>
 <td rowspan="5">
 <img src="images/circleintro_50.gif" width="1" height="83" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="8" alt=""></td>
 </tr>
 <tr>
 <td colspan="5">
 <img src="images/circleintro_51.gif" width="71" height="1" alt=""></td>
 <td rowspan="4">
 <img src="images/circleintro_52.gif" width="1" height="75" alt=""></td>
 <td colspan="3">
 <img src="images/circleintro_53.gif" width="71" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="5" rowspan="3">
 <img src="images/circleintro_54.gif" width="71" height="74" alt=""></td>
 <td colspan="3" rowspan="3">
 <img src="images/circleintro_55.gif" width="71" height="74" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="52" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/circleintro_56.gif" width="70" height="1" alt=""></td>
 <td rowspan="2">
 <img src="images/circleintro_57.gif" width="1" height="22" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 </tr>
 <tr>
 <td colspan="2">
 <img src="images/circleintro_58.gif" width="70" height="21" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="21" alt=""></td>
 </tr>
 <tr>
 <td>
 <img src="images/spacer.gif" width="18" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="53" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="8" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="10" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="43" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="9" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="70" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="69" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="70" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="53" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="17" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="1" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="52" height="1" alt=""></td>
 <td>
 <img src="images/spacer.gif" width="22" height="1" alt=""></td>
 <td></td>
 </tr>
 </table>
 <!-- End ImageReady Slices -->
 </body>
 </html>
 [/CODE]

Sorry it's so long... You can use "CTRL F" to find what I ask next...

What I want to change is:

When the cursor is over "images/circleintro_08" it causes...

"images/circleintro_08" to change into "images/circleintro_home_08" and

"images/circleintro_19.gif","images/circleintro_22.gif","images/circleintro_14.gif"

to change into

"images/circleintro_home_19.gif","images/circleintro_home_22.gif","images/circleintro_home_14.gif"

When the mouse goes off what now is "images/circleintro_home_08", I want it to turn back into "images/circleintro_08" and "images/circleintro_home_19.gif","images/circleintro_home_22.gif","images/circleintro_home_14.gif" to turn back into "images/circleintro_19.gif","images/circleintro_22.gif","images/circleintro_14.gif"

If you could just change the above code to do what I want so I can just copy and paste the whole darn thing in and replace what I already have, it would be great. I'd so much appreciate it. Maybe I shouldn't use "just."

Sorry for all the trouble, but if you like I can give you credit on the website. Thanks.

Oh and I could work it out for the other ones once I get this. Thanks so much once again.

Oh again. And Merry Late Christmas and a Happy New Year!

@NickoauthorJan 01.2007 — #Anyone? Please?

@NickoauthorJan 03.2007 — #Please. I need help (no not that type, or maybe...)

@NickoauthorJan 05.2007 — #Someone?

@NickoauthorJan 10.2007 — #ah forget it

Also in #JavaScript _↴

anyone understand what this code is (-1 to do what)?CSS/Javascript Menu errors in IE7 wich event for autocomplete procedure?

Success!

Help @Nicko spread the word by sharing this article on Twitter...

Tweet This

Does any one know what code?

26 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Does any one know what code?

26 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

26 Comments(s) _↴

Also in #JavaScript _↴