Maartenv87
Gebruiker
- Lid geworden
- 23 okt 2008
- Berichten
- 72
Ik zit vast met een css scriptje voor het zoomen van thumbnails.
Dit is wat er moet komen. Wanneer iemand over een kleine foto gaat komt er een andere foto tevoorschijn die 4 kleine foto's overlapt.
Ik heb al javascripts geprobeerd maar die verschuiven de tabel mee waardoor de lay out niet meer klopt.
Bedoeling is iets te krijgen zoals op de fotos.
Dit is de code die ik nu heb:
CSS
HTML
Probleem is dat wanneer er één foto vergroot is je niet meer naar de foto's daaronder kan gaan. Ik weet niet of er een tijdsfunctie is in css bv na 1 sec terug klein maken?
Volgende probleem is dat de grote foto altijd over de 4 kleinere moet passen.
Dus als de kleine foto linksboven is dan moet de grote foto anders komen dan als de kleine foto rechtsonder is.
Dit is wat er moet komen. Wanneer iemand over een kleine foto gaat komt er een andere foto tevoorschijn die 4 kleine foto's overlapt.
Ik heb al javascripts geprobeerd maar die verschuiven de tabel mee waardoor de lay out niet meer klopt.
Bedoeling is iets te krijgen zoals op de fotos.
Dit is de code die ik nu heb:
CSS
Code:
.thumbnailro{
position: relative;
z-index: 0;
}
.thumbnailro:hover{
background-color: transparent;
z-index: 50;
}
.thumbnailro span{
position: absolute;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnailro span img{
border-width: 0;
padding: 0px;
}
.thumbnailro:hover span{
visibility: visible;
top: 0;
left: 0px;
}
.thumbnaillo{
position: relative;
z-index: 0;
}
.thumbnaillo:hover{
background-color: transparent;
z-index: 50;
}
.thumbnaillo span{
position: absolute;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnaillo span img{
border-width: 0;
padding: 0px;
}
.thumbnaillo:hover span{
visibility: visible;
top: 0;
left: -146px;
}
HTML:
<div align="center"><a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnaillo" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a><br />
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a>
<a class="thumbnailro" href="#thumb"><img src="testkl.jpg" width="142px" height="142px" border="0" /><span><img src="test.jpg" /></span></a></div>
Probleem is dat wanneer er één foto vergroot is je niet meer naar de foto's daaronder kan gaan. Ik weet niet of er een tijdsfunctie is in css bv na 1 sec terug klein maken?
Volgende probleem is dat de grote foto altijd over de 4 kleinere moet passen.
Dus als de kleine foto linksboven is dan moet de grote foto anders komen dan als de kleine foto rechtsonder is.
Bijlagen
Laatst bewerkt: