使側翻圖像彈出並離開

我有一個簡單的側翻腳本，我想用它來使配置文件的拇指變大，以便您可以真正看到人的臉部。
Problem is when the image expands it is throwing off page layout。有沒有辦法讓圖像的右手邊角保持不變，但向左擴展，覆蓋舊圖像和其他需要覆蓋的東西？使側翻圖像彈出並離開

感謝您的建議。

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

下一個人......

來源

2013-01-20 user1904273

你會爲我們提供了工作演示：http://jsfiddle.net/ –

http://jsfiddle.net/wcfA4/我沒有用真實的圖像，但它給你的想法。這裏圖像下降，並在右邊。我希望它上升到左邊。 – user1904273

對不起，但圖像沒有擴大。請再次檢查你的小提琴，如果可能的話使用一些示例圖像。 –

你也必須設置爲position , height & width鼠標懸停及移出圖像。也
你可以使用jQuery中thumbPopup實用，例如在這裏.. link

來源

2013-01-20 03:53:15 sourcecode

在你的jsfiddle你不能上去到左邊，因爲沒有空間去那裏。

下面是一些使用固定值而不是計算它們的代碼，如果您希望它使用大拇指變得複雜，那麼您應該預先加載加載圖像，當鼠標移過大圖像時加載/顯示加載和何時加載大圖像設置原始圖像的src並重做風格。

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

來源

2013-01-20 04:42:19 HMR

看起來應該工作...但是，當我把jsfiddle，圖像沒有出現某種原因。 http://jsfiddle.net/Nk9w3/ – user1904273

img（image）元素的src（source）屬性必須指向一個實際的圖像。 – HMR

使側翻圖像彈出並離開

回答

相關問題