image effect

Hi

i am doing a website for a school, you can see a half done page here
http://www.yanmin.net/mac/science.php

on the middle rightside there is a bluebox ,inside there got three thumbnail, i want to mouse over the thumbnail and showing a bigger picture

i use this javascript ( also provided by cf member) put inside the head

<script type="text/javascript">
function display_picture(pic_url, pic_x, pic_y){
var pic_win = document.getElementById("pic_win")
pic_win.innerHTML = "<div style='vertical-align:middle; height:100%;'><img align='middle' src='"+pic_url+"'></div>"
pic_win.style.left = pic_x + "px"
pic_win.style.top = pic_y + "px"
pic_win.style.display = "block"
}
function hide_pic(){
var pic_win = document.getElementById("pic_win")
pic_win.style.display = "none"
}
</script>


then i added this line

<div id="pic_win" style="position:absolute; display:none; width:200px; height:200px;"></div>


but it just wont work, you can view my souce code to see.... thanks for your help

I tested the code you provided and I could not find a problem with it.

The error must be elsewhere on your page.

It looks like it works to me on your webpage too. The one problem is it is drawing it at coords 0, 0. So if you don't have a big enough monitor you can't see it being drawn up there.

david_kw

any chance i can shift the image showing around the mouse?