hover = visa stor bild

9 svar · 928 visningar · startad av kylberg 11 mars 2009

kylbergMedlem sedan nov. 200796 inlägg

Frågan11 mars 2009 17:53#1

Jag har ett bildgalleri med en massa thumbnails som jag lätt vill visa i större format, helst utan att behöva öppna bilden i ett nytt fönster. Går det att visa bilden i större format med hover:nånting? så att den blir som en sån där gul skylt som man får upp när man håller musen över vissa bilder.

rhdfMedlem sedan okt. 2007446 inlägg

11 mars 2009 18:10#2

det borde gå att lösa med nånting i stil med de tooltip-scripts som finns
jag misstänker dock att det finns en hel drös med script som gör exakt vad du vill.Jag googlade lite slumpmässigt på image mouseover preview tooltip
och hittade detta
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

kylbergMedlem sedan nov. 200796 inlägg

11 mars 2009 19:51#3

tackar! funkar skitbra! MEN jag undrar en sak..
i koden man använder länkar man till en bild, och när man håller musen över bilden visas en större preview, men om man klickar på bilden kommer man till bildens url, jag vill inte att något ska hända när man klickar. går det att inaktivera länken? man måste nämligen ha a href="bild.jpg" för att det ska funka...

bossseMedlem sedan juni 2003771 inlägg

11 mars 2009 21:17#4

Ett annat förslag, bilderna kan visas i individuell storlek.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type=text/css>
img {border:0}
.bild {width:120px; height:100px;}
</style>
<script src="overlib.js"></script>
</head>
<body>
<a href onmouseover="return overlib('<img src=bild1.jpg>',STICKY,MOUSEOFF, RELX,250, RELY,100)"><img src=bild1.jpg class=bild></a>
<a href onmouseover="return overlib('<img src=bild2.jpg>',STICKY,MOUSEOFF, RELX,250, RELY,100)"><img src=bild2.jpg class=bild></a>
<br>
<a href onmouseover="return overlib('<img src=bild3.jpg>',STICKY,MOUSEOFF, RELX,250, RELY,100)"><img src=bild3.jpg class=bild></a>
<a href onmouseover="return overlib('<img src=bild4.jpg>',STICKY,MOUSEOFF, RELX,250, RELY,100)"><img src=bild4.jpg class=bild></a>
<br>
<a href onmouseover="return overlib('<img src=bild5.jpg>',STICKY,MOUSEOFF, RELX,250, RELY,150)"><img src=bild5.jpg class=bild></a>
<a href onmouseover="return overlib('<img src=bild6.jpg>',STICKY,MOUSEOFF,RELX,250, RELY,150)"><img src=bild6.jpg class=bild></a>
</body>
</html>

Javascriptfilen till ovanstående finns på http://downloads.sourceforge.net/overlib/overlib422.zip?use_mirror=kent

kylbergMedlem sedan nov. 200796 inlägg

11 mars 2009 21:32#5

Edit:
det där var iochförsig inte så dumt... finns det mer info nånstans?

bossseMedlem sedan juni 2003771 inlägg

12 mars 2009 07:15#6

Visst, finns här.
http://www.bosrup.com/web/overlib/
http://www.bosrup.com/web/overlib/?Command_Reference
http://www.bosrup.com/web/overlib/?Documentation

kylbergMedlem sedan nov. 200796 inlägg

16 mars 2009 15:09#7

har börjat mecka lite med det där nu, finns det något sätt att bestämma storlek och position på de stora bilderna i javascript filen?

voigtann1Medlem sedan juni 20019 519 inlägg

16 mars 2009 15:23#8

ändra: RELX,250, RELY,150 till önskat värde.

kylbergMedlem sedan nov. 200796 inlägg

16 mars 2009 16:25#9

då måste jag ändra det på varje bild i html filen, jag vill ändra ett värde i .js-filen som ändrar värdet för alla bilderna på en gång..
dessutom ligger bilden kvar i x-led om jag minskar storleken på fönstret, medan resten av innehållet (som är centrerat) följer med åt vänster..

bossseMedlem sedan juni 2003771 inlägg

17 mars 2009 14:22#10

På denna sida har du lite du kan kika på, kanske något passar?
http://www.huntingground.freeserve.co.uk/imagery/imgnav.htm