Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
CSS ile hover - resim büyütme [acil yardım]
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
buyrun
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<style type="text/css">
.büyük {
width: 70px;
height: 70px;
}
.büyük:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<table width="987" height="511" border="1">
<tr>
<td><img class="büyük" src="en-guzelmanzara.jpg" /></td>
</tr>
</table>
</body>
</html>
-
boyutları kafama göre yazdı istediğin şekilde değiştirebilirsin -
Ayrı iki tane resme gerek yok, büyük olan resim yeterli.
.divadı img { width:500px; height:350px; }
.divadı img:hover { width:70px; height:50px; } -
okan yıldız
kullanıcısına yanıt
Çok teşekkür ederim -
sizede teşekkür ederim. Fakat bunda tablo bozuluyor 3 sütun 10 satır yapınca :/ bunu bozmadan yapmanın bir yolu yokmu?
örneğin:http://www.akvaryum.com/guney_amerika_cichlidleri_kategorisi_4.asp -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Başlıksız Belge</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div.thumbnail-item').mouseenter(function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).css('z-index','15')
.children("div.tooltip")
.css({'top': y + 10,'left': x + 20,'display':'block'});
}).mousemove(function(e) {
x = e.pageX - $(this).offset().left;
y = e.pageY - $(this).offset().top;
$(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
}).mouseleave(function() {
$(this).css('z-index','1')
.children("div.tooltip")
.animate({"opacity": "hide"}, "fast");
});
});
</script>
<style>
.thumbnail-item {
position: relative;
float: left;
margin: 0px 5px;
}
.thumbnail-item a {
display: block;
}
.thumbnail-item img.thumbnail {
border:3px solid #ccc;
}
.tooltip {
display: none;
position: absolute;
padding: 8px 0 0 8px;
}
.tooltip span.overlay {
background: url(images/overlay.png) no-repeat;
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div class="thumbnail-item">
<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=88332599&url=#" data-href="#"><img src="küçük resim.jpg" class="thumbnail"/></a>
<div class="tooltip">
<img src="büyükresim.jpg" alt="" width="330" height="185" />
<span class="overlay"></span>
</div>
</div>
</body>
</html>
-
okan yıldız
kullanıcısına yanıt
Sonsuz teşekkürlerimi sunuyorum ^^
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
