...

View Full Version : Mouseover, innerhtml and Image problem



Geph
08-30-2006, 10:52 PM
I have a thumbnail image. When a mouseover occurs the contents of a div above changes to show an enlargement and a caption. I am using innerhtml It works fine for the caption alone, but breaks as soon as I add an img tag or anything containing quotes. I had tried various ways of escaping the quotes to no avail.

This works:
<img src="/port/img/painting3-t.jpg" onmouseover="document.getElementById('display_lg').innerhtml='<p>Title of Painting3 oil on canvas 2006</p>'" />


This doesn't:
<img src="/port/img/painting3-t.jpg" onmouseover="document.getElementById('display_lg').innerhtml='<img src='/port/img/painting3.jpg' /><br /><p>Title of Painting3 oil on canvas 2006</p>'" />


In context ( http://nancyrebal.com/port/index3.shtml ):
<div id="display_lg" name="display_lg">
<img src="/port/img/painting1.jpg" />
<div class="imgcap">
Painting Title 2006
</div>
</div>
<span class="thumb_group">
<img src="/port/img/painting2-t.jpg" onmouseover="document.getElementById('display_lg').innerHTML='<br /><p>Title of Painting2 oil on canvas 2006</p>'" />
<img src="/port/img/painting3-t.jpg" onmouseover="document.getElementById('display_lg').innerhtml='<img src='/port/img/painting3.jpg' /><br /><p>Title of Painting3 oil on canvas 2006</p>'" />
</span>

Wylie
08-31-2006, 12:49 AM
you are quoting that highlight areas below, so it does not worked. You may better to create a class for this.

<img src="/port/img/painting3-t.jpg" onmouseover="document.getElementById('display_lg').innerhtml='<img src='/port/img/painting3.jpg' /><br /><p>Title of Painting3 oil on canvas 2006</p>'" />

Geph
08-31-2006, 03:45 AM
Actually, I had made an error and pasted in one with single quotes. It should have been:
<img src="/port/img/painting3-t.jpg" onmouseover="document.getElementById('display_lg').innerhtml='<img src="/port/img/painting3.jpg" /><br /><p>Title of Painting3 oil on canvas 2006</p>'" />

I have also tried &quot;, \" etc and nothing so far has worked. It seems like putting an image in innerhtml should be essentially a no-brainer and that the script should not need to be significantly more complex than HTML without quotes. I seldom deal with javascript and I would think that it would be just a simple syntax change that would fix this.

As for creating a class, you lost me there. If you are referring to a CSS class, how would that affect something such as this? I do remote popups and with CSS all the time, but it has serious limitations in some instances especially considering all the browser bugs.

Wylie
08-31-2006, 07:19 AM
Sorry, its confusing, I mean java class. Now, your problem is using too many quotation. So, if your called to java class to do innerHTML, you able to save a pair of quotation marks.

Example:

function changePic(){
document.getElementById('display_lg').innerhtml="<img src='/port/img/painting3.jpg' /><br /><p>Title of Painting3 oil on canvas 2006</p>";}

Hw2k
08-31-2006, 09:14 AM
wylie: not java class, javascript function :P

anyway, geph, you cant just mix around with ''s and ""s, so its better to go with functions in this case, perhaps a more flexible one that you just send the filename and title parameters to

Geph
09-01-2006, 01:11 AM
I got it working by separating the src change for the img from the innerhtml change for the caption as below:

onmouseover="document.getElementById('display_lg_img').src='/painting.jpg';document.getElementById('display_lg_cap').innerHTML='<p>Caption</p>'"

It works well for this particular use: http://nancyrebal.com/port/

Thanks, Wylie I tried your function, correcting the case on innerHTML, but couldn't get it to work.

And Hw2k, you can use multiple quotes, by escaping some of them, but for some reason every method I've tried has not worked. It's too bad that innerHTML messes up so badly when any attribute, class, name, id, href or anything that uses quotes is added to the string. Not surprising since it came from Microsoft. It would be nice to be able to use verbatim html.

In any case, I would still like to learn a way to put href and img in a string using innerHTML, with a function or not, that is fully contained inline with onmouseover.

Hw2k
09-01-2006, 07:45 AM
you could for example do something like this

<script language="javascript">
function switch(img, title) {
document.getElementById('img').src = '/port/img/' + img;
document.getElementById('title').innerHTML = title; // or whatever method you like to use for changing text :P
}
</script>

<div id="display_lg" name="display_lg">
<img id="img" src="/port/img/painting1.jpg" />
<div id="title" class="imgcap">
Painting Title 2006
</div>
</div>
<span class="thumb_group">
<img src="/port/img/painting2-t.jpg" onmouseover="show('painting1.jpg', 'Title 1')"/>
<img src="/port/img/painting3-t.jpg" onmouseover="show('painting2.jpg', 'Title 2')" />
</span>

but maybe thats not what you were looking for :P



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum