Hello to all coders of this community,
i found this forum after searching on google a way to popup an image when hovering another one and google found for me this thread
The post helped me alot as you will se next.
I have an online “shop” from wich mi players can buy items for they characters inside of an mmorpg game.
The shop can be accesed from ingame as well from outside with a normal browser.
Mi problem is that from ingame the game client uses a version of IE6 (i guess because the client is from year 2008) so the hover script doesent work.
Here are the pictures of the page from Chrome
and from Ingame
First thing is that its not showing the popup over all items that comes under and the next one doesent even show at all.
And here is the code that displays the image and the hover image
<td width="106px" rowspan="2">
<ul id="popup" class="popup">
<li>
<div class="item"><img src="images/items/'.$pic.'" /></div>
<div class="info">
<p><img src="images/items_details/'.$pic2.'" /></p>
</div>
</li>
</ul>
</td>
the variable are taken from database
here is the css
p {
margin:0
}
ul.popup {
width:106px;
border:2px solid #000;
position:relative;
margin:0 auto;
padding:0;
list-style:none;
}
ul.popup li {
display:inline-block;
border:2px solid #C96;
vertical-align:top;
}
* html ul.popup li {
display:inline
}
*+html ul.popup li {
display:inline
}
.item {
width:100px;
height:100px;
border:1px solid #000;
background:#CCC
}
.info {
position:absolute;
left:-999em;
background:#FF9;
padding:2px;
margin:-85px 0 0 90px;
border:1px solid #000;
width:auto;
}
.popup li:hover .item,
.popup li:hover .info,
.popup li.over .item,
.popup li.over .info {
position:relative;
z-index:100
}
.popup li:hover .info,
.popup li.over .info {
left:auto;
position:absolute
}
here is the js for IE6 i found on the thread above.Without it in the game the hover doesent show at all.
multiList = function (){
var sfEl = document.getElementById('popup');
sfEl.onmouseover=function() {
this.className+=" over";
}
sfEl.onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
var sfEls2 = document.getElementById('popup').getElementsByTagName("LI");
sfHover(sfEls2);
}
sfHover = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", multiList);
Thank you for taking your time to read this 
