Make rollover image pop up and to left
Question
I have a simple rollover script I want to use to make a profile thumb get bigger so you can actually see the person's face.
Problem is when the image expands it is throwing off page layout . Is there a way to make the image right hand corner stay the same but expand up and to the left covering old image and anything else it needs to cover?
Thanks for suggestions.
<tr>
<td>Joe Smith</td>
<td>
<a href="detail.html" onmouseover="document.pic.src='images/smallpic.gif'" onmouseout="document.pic.src='images/bigpic.gif'">
<img src="images/bigpic.gif" width="147" height="82" border="0" name="pic" alt="pic" />
</a>
</td>
</tr>
next person...
2 answers
solution1
0 2013-01-20 03:53:15
you also have to set the position , height & width for the image on mouseover and mouseout. also
you can use thumbPopup utility in jquery,example here.. link
solution2
0 2013-01-20 04:42:19
In your jsfiddle you cant go up and to the left because there is no space to go there.
Here is some code that uses fixed values instead of calculating them, if you want it to be complicated using thumbs then you should pre load a loading image, when the mouse goes over load the big image/show the loading and when the big image is loaded set the src of the original image and redo the style.
<!DOCTYPE html>
<html>
<head>
<script>
function expand(obj){
obj.style.position="relative";
obj.style.left="-100px";
obj.style.top="-100px";
obj.style.width="200px";
obj.style.height="200px";
}
function smaller(obj){
obj.style.position="static";
obj.style.width="100px";
obj.style.height="100px";
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td colspan=2 style="height:150px">
<p>Some text here Some text here Some text here Some text here
Some text here Some text here Some text here Some text here </p>
</td>
</tr>
<tr>
<td style="width:200px"></td>
<td>
<div style="width:100px;height:100px" id="needThisContainer">
<img src="picture.jpg" style="width:100px;height:100px"
onmouseover="expand(this);"
onmouseout="smaller(this)"/>
</div>
</td>
</tr>
</tbody>
</table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.