www.webdeveloper.com
Results 1 to 7 of 7

Thread: onMouseover Problem in Microsoft IE

Hybrid View

  1. #1
    Join Date
    May 2011
    Posts
    5

    onMouseover Problem in Microsoft IE

    Hallo,

    I am currently creating a Webpage for eBay, but habe a Problem displaying onmouseover correctly in IE.

    There is a big picture (name: Bild0)
    below some small pictures (Bild1, Bild2, usw.) which should be displayed in the big size when mouseover.

    The mouseovered picture should not be hidden (there is no mouseout) until another small picture will be mouseovered.

    So far this will work on any web-browser, but not in IE (I use the IE9). How can I fix it?

    Thanks for helping in advance.

    HTML:
    <IMG name=moni src=".../Bild0.jpg" height=270>

    <IMG onMouseOver="moni.src='.../Bild1.jpg';"src=".../Bild1.jpg" width=60 height=45>
    <IMG onMouseOver="moni.src='.../Bild2.jpg';"src=".../Bild2.jpg" width=60 height=45>
    <IMG onMouseOver="moni.src='.../Bild3.jpg';"src=".../Bild3.jpg" width=60 height=45>
    <IMG onMouseOver="moni.src='.../Bild4.jpg';"src=".../Bild4.jpg" width=60 height=45>

    http://i54.tinypic.com/2a5cirt.png

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    This is a JavaScript issue, not a CSS one (even there might be a CSS solution for rollovers, but not following your syntax). I'll move the Thread into the JavaScript Forum.

    Use id, not name. And use a function, don't code locally:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript">
    function rollOn(thisSRC){
    var myImg=document.getElementById('moni');
    myImg.src=thisSRC;
    }
    </script>
    </head>
    <body>
    <div>
    <img id="moni" src=".../Bild0.jpg" height="270">
    
    <img onmouseover="rollOn(this.src)" src=".../Bild1.jpg" width="60" height="45">
    <img onmouseover="rollOn(this.src)" src=".../Bild2.jpg" width="60" height="45">
    <img onmouseover="rollOn(this.src)" src=".../Bild3.jpg" width="60" height="45">
    <img onmouseover="rollOn(this.src)" src=".../Bild4.jpg" width="60" height="45">
    </div>
    </body>
    </html>
    Last edited by Kor; 05-16-2011 at 03:55 AM.

  3. #3
    Join Date
    May 2011
    Posts
    5
    Hello,

    since nobody answers...

    I am looking for a CSS picture rollover. Yes, I saw plenty of shopping-websites doing this with java-script (e.g. amazon)

    But, I need this for eBay, so i should not work with java-script.

    Please take a look to this website, this mouseover works exactly as I want it:
    http://www.web-toolbox.net/webtoolbo...vorschau02.htm

    How to fix my HTML to get the mouseover work in IE?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428

  5. #5
    Join Date
    May 2011
    Posts
    5
    Hi Kor, sorry I didn't see your first Message....

    Thanks for your help, it seems that only javascript helps.
    eBay accepted listing items with javascript for some reason. So it works.

    Thank you!

  6. #6
    Join Date
    May 2011
    Posts
    5
    Hello,

    2 years ago, I have posted my code and right now I am still working on a new feature.

    I have posted my question on several german forums, but it seems nobody knows a solution.

    HTML Code:
    <IMG name=moni2 src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" height=210>
     
      <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg';"
      src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" width=60 height=45>
     
      <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg';"
      src="http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg" width=60 height=45>
     
      <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg';"
      src="http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg" width=60 height=45>
    Please save this code in an editor ans save it as test.html > then open in a web browser

    I love this code because,
    - change on the big image when mouseover a small image
    - no mouseout
    - root picture can be added (visible when no mouseover has been made)

    Now, I need to add a URL on the big picture.
    The big challenge is:
    When image number 1 is shown, there must be URL number 1 on the big image,
    When image number 2 is shown, there must be URL number 2 on the big image.

    According to my friend, this URL challenge/problem cannot be solved with CSS.
    According to members in the german forums, this should be possible. Unfortunately they don't help me.

    The reason why I would like to change the code (to add image-dependent URLs on the big image) I need to change the code for touch screens in order to work.

    I hope for your professional help.

    Thank you in advance.

    P.S. If you need to know the full website for a better understanding, please visit http://tinyurl.com/bvrrgsj with an touch screen device (e.g. iPad) and on desktop. You will see the difference when mouseover/click on the small images

  7. #7
    Join Date
    May 2011
    Posts
    5
    Hello I want to delete my last post or at least the URL.
    Could you please remove the URL. Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles