[英]javascript/css: Make image expand up and to left on rollover effect
我想讓用戶擴展縮略圖,以便在鼠標懸停時查看大型個人資料照片。 但是,我當前的翻轉效果將表格行擴展為展開圖像的大小,而不是在周圍文本上顯示圖像。 任何人都可以建議一種方法來擴展圖像翻轉而不移動文本,換句話說,在其他HTML上顯示更大的圖像,而不是推遲它。 我嘗試過z-index,這似乎不起作用。
這是一個演示問題的jsfiddle:
這里的代碼與js小提琴中的代碼相同:
<script language="JavaScript">
<!-- hide from non JavaScript Browsers
image = new Array()
image[0]= new Image(24,24)
image[0].src = "http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
image[1] = new Image(48,48)
image[1].src = "https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"
</script>
<tr><td colspan=2>
<p align="center">
<a href="contactdetail.php"
onmouseover="newPic()"
onmouseout="oldPic()">
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif"
name="pic"
class="rollover"
border=0>
</a>
</p></td></tr>
<tr><td>Here is text</td></tr>
JS
function newPic(){
document.pic.style.left="-24px";
document.pic.style.top="-24px";
document.pic.src = image[1].src;
return true;
}
function oldPic(){
document.pic.src = image[0].src;
return true;
}
CSS:
#rollover {
display: block;
z-index:99;
padding: 4px;
position:relative;
text-align:left;
width:48px;
background-color:#E8E8E8;
opacity:1.0;
filter:alpha(opacity=100);
}
從CSSplay中竊取 - 放大 ,你可以在沒有Javascript的情況下做到這一點
HTML:
<tr>
<td colspan=2>
<p align="center"> <a class="rollover" href="contactdetail.php">
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/>
<span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span>
</a>
</p>
</td>
</tr>
<tr>
<td>Here is text</td>
</tr>
CSS:
a.rollover {
display: block;
position: relative;
}
a.rollover span {
position: absolute;
left: -10000px;
}
a.rollover:hover span {
position: absolute;
left: 200px;
}
更新 :
我不知道,如果這是您的想法,但您可以將更大的圖像放在任何您想要的位置
CSS:
a.rollover:hover span {
position: absolute;
left: 120px;
top: -20px;
}
如果要在懸停時隱藏下部圖像,可以嘗試添加opacity: 0
<img class="thumbnail" src="...">
和
a.rollover:hover .thumbnail {
opacity: 0;
}
雖然,我不知道這是否適用於每個瀏覽器。
一種方法是克隆你想要的所有<img>
節點,將它們放在<div>
,然后使用CSS :hover
為你做剩下的工作。 例子小提琴 。
我的代碼可以在文檔中的任何位置使用任意數量的<img>
,並且不需要固定大小的父節點。
如果由於JavaScript對HTML結構的更改而導致其他樣式不符合您的預期,您可能需要修改我所選擇的CSS或類名(請參閱下面的“生成的HTML”)。
// JavaScript
window.onload = function () { // when document has loaded, consider `window.addEventListener('load', /* code */, false);` in real world usage
var elm = document.querySelectorAll('img.rollover'), // get all <img>s with class "rollover"
i = elm.length, d;
while (--i >= 0) { // put each one and a clone into a <div> where it was
d = elm[i].parentNode.insertBefore(document.createElement('div'), elm[i]);
d.className = 'rollover';
elm[i].className = (' '+elm[i].className+' ') // set class'
.replace(/ rollover /g, ' ')
.slice(1, -1);
d.appendChild(elm[i]);
d.appendChild(elm[i].cloneNode()).className += ' rollover_big'; // I did clone here to save needing an extra variable
elm[i].className += ' rollover_small';
}
};
/* CSS */
div.rollover {position: relative; display: block;} /* relative to allow for abs. positioning of big image */
div.rollover img.rollover_small {width: 24px;}
div.rollover img.rollover_big { /* position over small image*/
width: 48px;
display: none;
position: absolute;
top: 0px;
}
div.rollover:hover img.rollover_small {visibility: hidden;} /* visibility to hold space*/
div.rollover:hover img.rollover_big {display: block;} /* show bigger node*/
<!-- HTML -->
<table>
<tr>
<td colspan=2><a href="contactdetail.php"><img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover"/></a></td>
</tr>
<tr>
<td>Here is text</td>
</tr>
<!-- etc. -->
</table>
<!-- Resulting HTML after load event -->
<table>
<tr>
<td colspan=2><a href="contactdetail.php">
<div class="rollover">
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_small"/>
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_big"/>
</div>
</a></td>
</tr>
<tr>
<td>Here is text</td>
</tr>
<!-- etc. -->
</table>
你不需要javascript。 請參閱jsFiddle上的工作演示 。
用CSS做 :
td.imgCell {
height: 40px; /* a value greater than image height + paddings */
text-align: center;
}
img.rollover {
display: inline-block;
position: relative;
padding: 4px;
width: 24px;
height: 24px;
background-color:#E8E8E8;
border: 0px none;
}
img.rollover:hover {
position: absolute;
width: 48px;
height: 48px;
margin-top: -24px;
margin-left: -24px;
z-index: 99;
}
這是修改后的HTML :
<table>
<tr>
<td class="imgCell">
<a href="contactdetail.php">
<img class="rollover" src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" />
</a>
</td>
</tr>
<tr>
<td>Here is text</td>
</tr>
</table>
請注意,還聲明並設置了容器td的類: <td class="imgCell">
關鍵點:
<td>
應該具有固定的高度。 absolute
位置。 其他更正/建議:
colspan
屬性。 colspan屬性定義單元格應跨越的列數。 您不必這樣做,因為每行( <tr>
)中只有一個<td>
。 <p>
標記。 但這沒錯。 如果你堅持使用那個JS代碼;
</script>
標記之前包含//-->
因為您在開始時<!-- hide from non JavaScript Browsers
。 var
聲明image變量,否則它將在全局范圍內。 []
而不是new Array()
來初始化數組,就像jsLint建議的那樣。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.