onMouseover Problem in Microsoft IE

This site is best viewed in a modern browser with JavaScript enabled.

aurelius

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>

Kor

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:

<!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>

aurelius

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/webtoolbox/bilder/01-bildvorschau/bildvorschau02.htm

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

Kor

http://www.google.ro/#hl=en&source=hp&q=css+rollover&aq=2&aqi=g10&aql=f&oq=css+ro&bav=on.2,or.r_gc.r_pw.&fp=9640976be5f49e7c&biw=1680&bih=894

aurelius

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!

aurelius

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.

<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

aurelius

Hello I want to delete my last post or at least the URL.
Could you please remove the URL. Thanks