/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Vis billede når musen føres over link
Fra : Alan Malligsen


Dato : 16-09-02 21:28

Jeg har et lille problem:

På min billedside har jeg en række thumbnails placeret i en boks (div)
og jeg vil gerne give brugerne mlighed for at pege/klikke på
thumbnailen for så nedenunder (i en ny boks) at se en større udgave af
billedet.
Det er set før på en af disse boligsalgssider (husker ikke hvilken) og
burde egentlig ikke være så svært...
Skulle jeg bruge noget preload images eller hvad?

VH - Alan

Siden ligger på http://www.friserverplads.dk/toenderbmx og billederne
ligger under linket "banen"

 
 
Lasse Reichstein Nie~ (17-09-2002)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 17-09-02 00:28

alan_malligsen@hotmail.com (Alan Malligsen) writes:

> På min billedside har jeg en række thumbnails placeret i en boks (div)
> og jeg vil gerne give brugerne mlighed for at pege/klikke på
> thumbnailen for så nedenunder (i en ny boks) at se en større udgave af
> billedet.

Det lyder som om du gerne vil have et klik på et (lille) billede til
at ændre udseendet af et andet (stort) billede.
Det er et job for javascript :)
Prøv noget i stil med:

<img src="lille1.png" height="20" width="20"
alt="Klik her for stort billede af Foo"
onClick="document.getElementById('stort').src='stort1.png';">
<img src="lille2.png" height="20" width="20"
alt="Klik her for stort billede af Bar"
onClick="document.getElementById('stort').src='stort2.png';">

<img src="stort0.png" height="200" width="200" id="stort">


Det vigtige er at de små billeder har en attribut af typen onClick.
Så vil
onClick="document.getElementById('stort').src='stort1.png'"
gøre at når man trykker på billedet så vil src-attributten på det
element med id="stort" blive ændret til "stort1.png".

> Skulle jeg bruge noget preload images eller hvad?

Preload sørger bare for at billederne man skifter til bliver loadet
før man får brug for dem. Så er de allerede i cachen når man trykker,
så det hele ser ud til at gå hurtigere. Andet gør det ikke.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Knud Gert Ellentoft (17-09-2002)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 17-09-02 01:24

16 Sep 2002 13:27:58 -0700, skrev alan_malligsen@hotmail.com
(Alan Malligsen):

>På min billedside har jeg en række thumbnails placeret i en boks (div)
>og jeg vil gerne give brugerne mlighed for at pege/klikke på
>thumbnailen for så nedenunder (i en ny boks) at se en større udgave af
>billedet.

Se
<http://home13.inet.tele.dk/smedpark/webhjaelp/grafik/slideshow3.htm>
om det er noget du kan bruge ellers kan du lave ud fra
nedenstående princip, skift blot tekstlinket ud med et imagelink
i stedet for.

<html>
<head>
<style type="text/css">
<!--
#img1 {position:absolute; top:100; left:150}
-->
</style>
<script language="JavaScript">
<!--
var ie45,ns6,ns4,dom;
if (navigator.appName=="Microsoft Internet Explorer")
ie45=parseInt(navigator.appVersion)>=4;
else if (navigator.appName=="Netscape"){
ns6=parseInt(navigator.appVersion)>=5;
ns4=parseInt(navigator.appVersion)<5;}
dom=ie45 || ns6;

function showhide(id) {
el = document.all ? document.all[id] :
dom ? document.getElementById(id) :
document.layers[id];
els = dom ? el.style : el;
if (dom){
if (els.visibility == "hidden")
els.visibility = "visible";
else els.visibility = "hidden";
}
else if (ns4){
if (els.visibility == "show")
els.visibility = "hide";
else els.visibility = "show";
}
}
//-->
</script>
</head>
<body>
<p>
<a href="#" onmouseover="showhide('img1');return false"
onmouseout="showhide('img1');return false">Se mig!</a>
</p>
<div id="img1" style="visibility:hidden">
<img src="billede.jpg" width=252 height=252 border=0
alt="alttekst"></div>
</body>
</html>

I ovennævnte eksempel er billede kun fremme når musen er over
linket.

Du kan også bruge princippet i
<http://home13.inet.tele.dk/smedpark/test/vis.htm>

Det er jo blot at skifte texten ud med billeder.

Som du ser har jeg et par forslag og du vil bruge et af dem, så
spørg bare om hjælp, så vil jeg godt lave et tilpaset eksempel
med billeder.
--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.

Lasse Reichstein Nie~ (17-09-2002)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 17-09-02 10:05

Knud Gert Ellentoft <knudgert@mail.tele.dk> writes:

> var ie45,ns6,ns4,dom;
> if (navigator.appName=="Microsoft Internet Explorer")
> ie45=parseInt(navigator.appVersion)>=4;
> else if (navigator.appName=="Netscape"){
> ns6=parseInt(navigator.appVersion)>=5;
> ns4=parseInt(navigator.appVersion)<5;}
> dom=ie45 || ns6;

Dom er altså *kun* sand for IE4+ og NS6.

> function showhide(id) {
> el = document.all ? document.all[id] :
> dom ? document.getElementById(id) :
> document.layers[id];

Dette ville faktisk fejle for Opera, som ikke har document.all eller
document.layers, men har document.getElementById (og ikke er IE4+ eller
Netscape 6).

En bedre løsning ville være

el = document.all ? document.all[id] :
document.getElementById ? document.getElementById(id) :
document.layers[id];

(man skal huske at document.layers kun virker på bokse (<div>'er) ...
det glemmer jeg altid :))

> els = dom ? el.style : el;

og her (fejler også på Opera):

els = el.style? el.style : el;

(eller i det mindste
els = !ns4 ? el.style : el;
som kun ville vælge Netscape 4 fra)

Det er generelt farligt at antage noget ud fra check af Browser-id'en,
specielt da man aldrig kan tage højde for alle browsere (eller folk
hvis browsere lyver). Det eneste man bør gøre på den måde er at
udelukke browsere som man har genkendt helt præcist (fx Netscape 4)
hvis man ved at de ikke understøtter det man prøver på. Det er dog altid
sikrere at tjekke om det man vil er muligt direkte, det virker også
på browsere man ikke kender.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Alan Malligsen (18-09-2002)
Kommentar
Fra : Alan Malligsen


Dato : 18-09-02 14:53

Mange tak for de gode forslag. Jeg fik løst problemet - resultatet kan ses på

http://www.friserverplads.dk/toenderbmx/banen.htm

VH - Alan

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408929
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste