trouble with mouseover image

mollysugden · 07-19-2010, 09:16 PM

hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you

here is the script i am using

<head>
<script type="text/javascript" src="??????????.js"></script>
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width =300;
holder.height=300;
}
</script>
</head>

and here is the main body code

<a href="http://www.???????.com/" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

RandomUser531 · 07-19-2010, 09:38 PM

Presumably your large images are correspondingly named according to a given scheme, so you need to state what that scheme is.

mollysugden · 07-19-2010, 09:44 PM

please forgive me for my ignorance but i am a complete novice, my images are all named seperately on the .js file as a seperate line for each image:

<a href="http://www.???????.com/" target="_blank"><img src="????1.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

<a href="http://www.???????.com/" target="_blank"><img src="????2?.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'

etc etc as this was the best way for me to do and understand the random ads.

Then i presume the ShowIt(this.src) allows the exact same image to show only larger, as a novice i dont understand how or where to change the code to show a different image on the mouseover

the larger image is displayed by this

<img src="??????.jpg" id="imageshow" width=300 height=300>

but the image source on this refers to a holding image

Old Pedant · 07-19-2010, 10:25 PM

But you still haven't told us how the FILE NAME of the "slightly different picture" is related, if at all, to the file name of the thumbnail.

If there isn't any relationship, then you'll have to create a logical link of some kind between the two names.

One possible *VERY* simple way:

Code:

<img id="MAIN" style="border: solid black 3px; width: 300px; height: 300px;" />
...
<img src="xyz.jpg" style="width: 100px; height: 100px;" 
     onmouseover="document.getElementById('MAIN').src='whatever.png';" />
...

But the difficulty with that is that there will be a delay in showing "whatever.png" the first time, as it is downloaded from the server. So you probably want something a tiny bit more sophisticated.

If you would tell us how--if at all--the small and large image FILE NAMES are related, it would be easier to help you. Even if they aren't related, there are ways to do this, just not as easily.

mollysugden · 07-19-2010, 10:37 PM

sorry if i am not very clear, at the moment the relationship between the two images is that it is the SAME image, i have copied script that simply shows the exact same image in a different location by the onmouseover=showIt(this.src) i presume. So as i am very poor at javascript i am now trying to add an additional feature where i replace the image with a complete new unrelated image and was hoping there would be something obvious i was missing. Again i apologise if this is not clear and frustrating but the novice i am is clearly showing here

if it helps here is the full code, its confusing me due to the random ads section being very important too:

.js file

var adblock=new Array()
adblock[0]='<a href="http://www.1.com/" target="_blank"><img src="1.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>'
adblock[1]='<a href="http://www.2.com/" target="_blank"><img src="2.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)"></a>'
adblock[2]='<a href="http://www.3.com/" target="_blank"><img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)"></a>'

function randomorder(targetarray, spacing) {
var randomorder=new Array()
var the_one
var z=0
for (i=0;i<targetarray.length;i++)
randomorder[i]=i

while (z<targetarray.length) {
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
document.write(targetarray[the_one]+spacing)
targetarray[the_one]="_selected!"
z++
}
}
}

.html file

<html>
<head>
<script type="text/javascript" src="???????.js"></script>
<script type="text/javascript">
function showIt(imgsrc)
{
var holder = document.getElementById('imageshow');
var newpic= new Image();
newpic.src=imgsrc;
holder.src=imgsrc;
holder.width =300;
holder.height=300;
}
</script>
</head>

<body>
<table border="1" width=100%>
<tr>
<td>
<th>
<script type="text/javascript">
randomorder(adblock, '')
</script>
</th>
</td>
<td width=300>
<img src="holdingimage.jpg" id="imageshow" width=300 height=300>
</td>
</tr>
</table>

</body>
</html>

Old Pedant · 07-19-2010, 11:06 PM

I guess you didn't understand my post.

Yes you *COULD* simply change:

Code:

<img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(this.src)">

to something like

Code:

<img src="3.jpg" width="100" height="100" border="0" onmouseover="showIt(\'xyz.jpg\')">

But, as I said, this will mean that the first time you mouseover "3.jpg" it will take time to download the picture "xyz.jpg" and display it. Not the best user experience.

If you know the names of *ALL* the possible replacement pictures ahead of time, then you can do image pre-loads and the user experience is better.

By the by, as it is now, your showIt( ) function code is overly complex for no purpose.

RandomUser531 · 07-19-2010, 11:06 PM

Quote:

Originally Posted by mollysugden

sorry if i am not very clear, at the moment the relationship between the two images is that it is the SAME image, i have copied script that simply shows the exact same image in a different location by the onmouseover=showIt(this.src) i presume. So as i am very poor at javascript i am now trying to add an additional feature where i replace the image with a complete new unrelated image and was hoping there would be something obvious i was missing.

That was all understood initially, but to make the task easier there should be a relationship between the corresponding file names, like 1.jpg and 1_big.jpg etc, in which case you could use:

onmouseover = "showIt( this.src.replace('.jpg', '_big.jpg') )"

mollysugden · 07-19-2010, 11:30 PM

thank you very kindly to both of you as this appears to work perfectly, sorry for the long winded understanding from my end, The 'simple' option does what i need but in future there will be hundreds of pictures and if you have the time i would be grateful of an easier option to run this script. Basicalli what i have got does what i want ie, randomise a collection of images then upon mouseover show a related but different image in a seperate location.

As i said before your solutions work and i am very grateful for your help, but i am always looking for an easier and better option for future as the site develops and increases in size

cheers

Old Pedant · 07-20-2010, 01:04 AM

Well, actually, this simple way might be the best idea if you have hundreds of pictures.

First of all, if you had 100 small thumbnails then you really *SHOULD* create small thumbnail images!! If the actual images on disk are big--100KB or larger--and yet they are displayed in a 100x100 spot in the browser, you are making the user's browser download *ALL* those large images (10MB or more!!) when you could have gotten away with may a tenth or twentieth the download. People will get mad at you for making them wait forever for a bunch of tiny images.

Anyway, if you also have 100 separate large images, the same problem attains. Until all 100 of those large images are sent from the server to the browser, you'll have to wait for the image before it will show.

Now, there are ways to "pre-load" images, behind the scenes, using JavaScript. And so the page will come up reasonably quickly and the pre-loading will happen after the page appears. Yet, still, you can't guarantee that the image the user rolls over will already be downloaded. And there still can be a delay.

If you can live with the delays, though, then the simple code we have shown you works just fine.

In general, any time you start talking "hundreds of images" for a web page, *some place* you are going to pay the price, in terms of download time.