Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouseover, innerhtml and Image problem

    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>

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>'" />
    Last edited by Wylie; 08-31-2006 at 01:51 AM.

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Geph; 08-31-2006 at 04:48 AM.

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>";}
    Last edited by Wylie; 08-31-2006 at 08:26 AM.

  • #5
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Geph; 09-01-2006 at 02:14 AM.

  • #7
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •