CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

viggosmor Nybegynder

24. september 2007 - 14:50 Der er 12 kommentarer og
1 løsning

image popup ved hover?

Hejsa

Jeg læser til multimediedesigner, og min gruppe og jeg, har et projekt, hvor vi skal lave et site til en kunstudstilling.

Jeg har brug for at vide, hvordan man vha. css kan lave det sådan, at når man kører musen hen over en lille thumbnail af et billede, så popper der et større billede op ved siden af, altså ikke bare udskifter thumbnailen med et andet billede, det kan jeg godt finde ud af, men at der altså kommer endnu et billede frem ved rollover..

Lidt svært at forklare det...

Det er lidt af en haste opgave så hurtige svar ønskes...

På forhånd tak, viggosmor

Synes godt om

Slettet bruger

24. september 2007 - 15:19 #1

Muligvis ikke verdens pæneste metode (det er også bare en form for proof of concept) og den er kun testet i firefox, jeg har anvendt div'er i stedet for billeder, det er nemmere i et forum

HTML:

<a href="#">
<div>
<div>

</div>
</div>
</a>

CSS:

a div {
background-color:blue;
width:100px;
height:100px;
position:relative;
}

a div div {
background-color:yellow;
width:200px;
height:200px;
position:absolute;
top:2em;
left:2em;
display:none;
}

a:hover div div {
display:block;
}

som nævnt virker det fint i FF.

Synes godt om

viggosmor Nybegynder

24. september 2007 - 15:44 #2

Hej Daleif, takker for dit hurtige svar :-)

Jeg forstår ikke helt, det du skriver med div er istedet for billeder, skal jeg "bare" udskifte div érne med <img src="xxx.jpg">
Eller hvad mener du?

Synes godt om

Slettet bruger

24. september 2007 - 16:06 #3

du kan jo prøve, ved ikke om det virker, ellers skulle der være masse af disse kontruktioner rundt om på nettet. Har desværre ikke tid til at hjælpe mere lige nu.

Synes godt om

viggosmor Nybegynder

24. september 2007 - 19:23 #4

Oki, kunne ikke få det til at fungere, så hvis der er andre, der ligger inde med svaret, ville jeg blive glad...

Synes godt om

olebole Juniormester

24. september 2007 - 22:52 #5

<ole>

daleif >> Det vil betyde et div (block-element) i et link (inline-element) ... det kan og mås man ikke :)

/mvh
</bole>

Synes godt om

efes Nybegynder

25. september 2007 - 16:10 #6

Hejsa

Er det sådan noget, som dette du tænker på: www.123sommerhus.dk

Mvh.
Efes

Synes godt om

Slettet bruger

25. september 2007 - 16:17 #7

olebole >> det virker da fint i FF, var også bare et proof of concept.

Synes godt om

Slettet bruger

25. september 2007 - 16:18 #8

efes >> kan da ikke se noget som abre ligner den effekt på det link

Synes godt om

neoman Novice

25. september 2007 - 16:23 #9

http://www.softcomplex.com/products/tigra_hints/demo.html - det er gratis!

Synes godt om

efes Nybegynder

25. september 2007 - 21:29 #10

daleif >> Det er korrekt, at der ikke er en hover effekt - det kræve et klik med musen på billedet.

viggosmor >> Jeg kan anbefale at kigge på Stu Nicholls side, hvor der er masse af eksempler. Se eksempelvis http://www.cssplay.co.uk/menu/gallery.html

Mvh.
Efes

Synes godt om

johan.o Nybegynder

25. september 2007 - 21:44 #11

Måske du kan bruge noget alá det her ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Test.</title>
<script type="text/javascript">

function showThumb(oThumb) {
oLPC=document.getElementById("LPC");
oLP=document.getElementById("LP");
oLPC.style.left=(oThumb.offsetLeft+oThumb.width+5)+"px";
oLPC.style.top=oThumb.offsetTop+"px";
oLP.src=oThumb.src;
oLPC.style.display="block";
}
</script>
</head>

<body>

<div id="LPC" style="position: absolute; display: none;"><img id="LP" src="" alt="Stort billede"></div>

<p><img src="pic.jpg" style="position: relative; width: 100px;" alt="Lille billede" onmouseover="showThumb(this);" onmouseout="document.getElementById('LPC').style.display='none';"></p>

</body>
</html>

Mvh. Johan

Synes godt om

viggosmor Nybegynder

26. september 2007 - 20:40 #12

Takker for jeres svar, vi er dog imellem tiden gået bort fra idéen.

Ved ikke hvem jeg skal give point?

Så smid et svar hvis du mener, du har givet et godt svar...

Synes godt om

viggosmor Nybegynder

30. oktober 2007 - 13:34 #13

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS