...

View Full Version : Displaying images with mouseover...



dodgy geezer
12-05-2012, 09:15 PM
I'm just starting to try javascript, and I wanted to have a list of names down the left side of a screen, and an image box on the right with titles abd various other data, all these changing as you mouseover the different names. That was easy to do, with each name being a hyperlink and using the 'onmouseover' command to run a little script which used the 'document.getelement' command to change the src of the image box.

The names are made up from lines looking like this:

<code><a href="" onmouseover="preview('Kestrel','18 in','Marinecraft','Balsa cabin Cruiser','nodata.jpg','Dummy.zip')" title="Click to find Kestrel on the Web">Kestrel</a><br /></code>

and the script is:

<code>function preview(a,b,c,d,e,f){
document.getElementById('name').innerHTML=a
document.getElementById('size').innerHTML=b
document.getElementById('author').innerHTML=c
document.getElementById('desc').innerHTML=d
document.getElementById('image').setAttribute('src',e)
document.getElementById('link').href=f
}
</code>

This works fine. Now, I am trying to expand it to include a button above the image which will give me a different view of the same image when clicked on. I though that I could simply make the button as a hypertext link, and alter it in the same way as the other fields using the script. It would be altered to use the 'onclick' command to change the image source, as in the 6th line down of the function above. So I added an extra text box, and extra variable, and and an extra line in the script:

<code>
document.getElementById('box').innerHTML="" onclick ="document.getElementById('image').setAttribute('src',g)""
</code>

The text box is simply:

<code>
<div class="text16"><a href="" id="box" title="Click to display box art">box art</a>
</div>
</code>

and, of course, it doesn't work. I don't know if what I want can be done this way, and, if it can, how to set all the quote marks so that they are correct. Can anyone please see if I'm doing anything obviously wrong?

Old Pedant
12-05-2012, 09:33 PM
Makes no sense at all on a couple of fronts.

(1) you have misused quotes here:


document.getElementById('box').innerHTML="" onclick ="document.getElementById('image').setAttribute('src',g)""

What you have, effectively, written by doing that is


document.getElementById('box').innerHTML="";
onclick ="document.getElementById('image').setAttribute('src',g)";
";

That is, you have created 3 JS statements, of which the second two are clearly bogus.

***********

But beyond that... Give that the element with id="box" is your

<a href="" id="box" title="Click to display box art">box art</a>

When you change the innerHTML of an <a> element, you are changing *ONLY* the part *BETWEEN* the <a> and the </a> !!!

So...

I *think* what you wanted was


document.getElementById('box').onclick =
function() { document.getElementById('image').setAttribute('src',g); };

Though I have no idea where your variable g is going from.

dodgy geezer
12-05-2012, 10:28 PM
Thanks for the rapid reply!

As you can see from my misuse of the code tabs, I'm rather new to all this, so it will take me a bit of time to understand what you have said.

Let me see if I can explain what I'm trying to do in a simpler way.

1 - I'm making a column of html links. As you mouseover each one, the 'preview' script above shows an image and 5 other text fields associated with that link. (That's simple, and it took me a couple of days to get that right!)

2 - I then wanted to let the user see different images. So I thought that I could just create another text box and, instead of writing a text string to it, write an 'onclick' command to it. So each time a new image was displayed, that box would contain a new 'onclick' secondary image.

The problem seems to be that javascript can write some fields to an element, like image source, for instance, but it doesn't seem to be able to be able to add a variable 'onclick' field.


The 'g' variable would be the actual jpg image to be displayed by the new 'onclick' field which is to be added to the 'box' element. So the new script would read:



function preview(a,b,c,d,e,f,g){
document.getElementById('name').innerHTML=a
document.getElementById('size').innerHTML=b
document.getElementById('author').innerHTML=c
document.getElementById('desc').innerHTML=d
document.getElementById('image').setAttribute('src',e)
document.getElementById('link').href=f
document.getElementById('box').onclick =
function() {
document.getElementById('image').setAttribute('src',g); };
}


I don't know how much this helps - one problem I have is that I don't know enough technical terms to communicate effectively.. :( Your correction made the script function (thanks for that), but it still doesn't set the 'box' element to display the new image when an onclick is made....) I wonder if that's actually possible....

dodgy geezer
12-05-2012, 11:03 PM
A bit of experimentation shows that the 'box' element HAS been changed. However, it seems to display the second image for a fleeting moment, and then the element changes to a blank.

Does the 'onclick' mean that the action only occurs during the click, and reverts back to the way it was? I find that the page now works as I had intended if I change the 'onclick' to 'onmouseover'. But the click just displays it during the 'click' period.

However - thanks a lot for moving me so far forward. I can now examine a bit of code that works and try to understand why!

dodgy geezer
12-05-2012, 11:07 PM
Oh, and all the other text fields that I had put up in the first part of the script disappear when the new image is selected. I wonder why this is......

Old Pedant
12-05-2012, 11:11 PM
Oh, that's because g has gone OUT OF SCOPE by the time the onclick occurs.

g only exists for so long as your preview function is executing.

Try this simple trick:


function preview(a,b,c,d,e,f,g){
var image = g; // this helps create a "closure"!!
document.getElementById('name').innerHTML=a
document.getElementById('size').innerHTML=b
document.getElementById('author').innerHTML=c
document.getElementById('desc').innerHTML=d
document.getElementById('image').setAttribute('src',e)
document.getElementById('link').href=f
document.getElementById('box').onclick =
function() {
document.getElementById('image').setAttribute('src',image);
return false;
};
}

I forgot the return false before. It is needed to prevent the <a> tag from doing its normal thing, which in this case would be to reload the page. (Its href is blank, which is the same thing as "this same page".)

dodgy geezer
12-05-2012, 11:27 PM
Thanks for sticking with a newbie so long!

Is that 'g' a global variable once you have done that?

I shall have to sign off and do some more experimenting tomorrow - it's coming up to midnight here...

dodgy geezer
12-05-2012, 11:35 PM
"An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is."

...and an engineer points out that the glass has been designed 100% over spec....

Old Pedant
12-06-2012, 12:03 AM
Is that 'g' a global variable once you have done that?

NO. g hasn't changed. It's still just a parameter to the function. All function parameters have only function scope.

Even image is not a GLOBAL variable. It is, as I stated, a "closure variable". Closures are something nearly unique to JavaScript. A way of extending the life of a variable so long as it is needed by a function that is enclosed in another function. I'll let you google "javascript closure". Fascinating subject.

Old Pedant
12-06-2012, 12:05 AM
"An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is."

...and an engineer points out that the glass has been designed 100% over spec....

And a pragmatist points out the engineer has, as usual, made a faulty assumption. To wit in this case, that the drinker will always want or need only half a glass.

dodgy geezer
12-06-2012, 06:22 PM
And a pragmatist points out the engineer has, as usual, made a faulty assumption. To wit in this case, that the drinker will always want or need only half a glass.


Half a glass is all the drinker ever seems to get in this scenario, so you could claim that the assumption is within acceptable tolerances.. :o

Thanks again for the assistance - I think I am sorted now, and will start investigating how functions inside functions work....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum