...

View Full Version : newbie javascript problem - onMouseover slideshow with multiple image locations



mindonedig
07-14-2010, 10:19 PM
Hi,

Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow:

http://www.javascriptkit.com/script/script2/rolldifferent.shtml

to use on my site.

Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script?


If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations?

Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2.

Thanks in advance

Script Below:



<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages(my images here)

</script>

For the Links:

<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>

For the Image:

<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>

Old Pedant
07-14-2010, 10:26 PM
It's because the code uses the name= of the image.

And you can't have two <img> tags with the same name. (Well, you can, but then you can't refer to a single image by name.)

Lots of ways to fix it, but the simplest would be to just clone the code, changing all the names in the clone. Maybe just add "2" to the names.



function changeimage2(towhat,url){
if (document.images){
document.images.targetimage3.src=towhat.src
gotolink2=url
}
}
... etc. ...

Obviously, you don't want to do this if you will have N such images. Where N is greater than 3 and maybe greater than 2.

If you will have N>3, then ask again.

mindonedig
07-14-2010, 10:32 PM
hi,

thanks for the reply.

Im a total newbie to javascript and literally copied and pasted the code. I don't know any technical names or what the functions in the code do as such, but Ill try your suggestion and report back.

I will have over 50 images associated with this javascript.

Old Pedant
07-14-2010, 10:39 PM
Ehhh...I think maybe here is a simpler solution. That code is too ugly to live, anyway.



<script type="text/javascript">
function changeLink( linkid, iname, thislink )
{
var link = document.getElementById(linkid);
var image = link.getElementsByTagName("img")[0];
image.src = iname;
link.href = thislink.href;
}
</script>

...

<a href="creativewriting.html" onMouseover="changelink('link1','writing.jpg',this)">Creative Writing</a><br>
<a href="basketweaving.html" onMouseover="changelink('link1','weaving.jpg',this)">Underwater Basket Weaving</a><br>


<a id="link1" href="creativewriting.html"><img src="writing.jpg" border=0></a>

<a href="atomics.html" onMouseover="changelink('link2','atomics.jpg',this)">Nuclear Physics for Fun & Profit</a><br>
<a href="biology.html" onMouseover="changelink('link2','biology.jpg',this)">How to Mutate Plants</a><br>

<a id="link2" href="biology.html"><img src="biology.jpg" border=0></a>

You can keep the preload of the images, if you want. Can't hurt, might help.

NOTE: If you made the names of the images *match* the names of the pages (as mine do, in the second set of above example, we could simplify a bit further.

This code gets rid of warp() and gotolink entirely and does it all with a single simple function.

mindonedig
07-14-2010, 11:16 PM
Hi,

Thanks for the info

I tried the 2nd method you suggested with the simpler function, and it doesn't work at all!

not sure what I'm doing wrong or if theres a mistake in the code. I re-checked about 10 times.

If i could simply re-clone the code I have, I'll be happy, since I dont have a clue about javascript.

To re-code, is this correct?:


/

function changeimage2(towhat,url){
if (document.images){
document.images.targetimage3.src=towhat.src
gotolink2=url
}
}
function warp2(){
window.location=gotolink2
}
</script>
<script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages2(){
for (i=0;i<preloadimages2.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages2.arguments[i]
}
}

preloadimages2("all of my images" )
</script>

and image location would be: <a href="javascript:warp()"><img src="clicklinksontheleft.png" name="targetimage3" border=0></a>

mindonedig
07-14-2010, 11:26 PM
YES!

my mr ugly is finally starting to work with the cloned code.

It may be a bit slow, but Im going to put it in a .js file so should lighten things up a bit

thanks for the help...i appreciate it!!

Old Pedant
07-14-2010, 11:33 PM
You also need


var gotolink2="#"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum