---

Jeg har en side med en masse små billeder.

Så vil jeg gerne have at når man holder musen over billederne så bliver
de forstørret så man bedre kan se det.

Er der nogen der kender sådan et godt javascript script ?

---

Den 14-01-2011 04:07, scootergrisen skrev:
> Jeg har en side med en masse små billeder.
>
> Så vil jeg gerne have at når man holder musen over
> billederne så bliver de forstørret så man bedre kan se det.
>
> Er der nogen der kender sådan et godt javascript script ?

Det er ikke særlig moderne, men...

http://webdesign101.dk/x/pixshow/pixshow.html


--
Jørgen Farum Jensen
http://webdesign101.dk
..

---

> Det er ikke særlig moderne, men...
>
> http://webdesign101.dk/x/pixshow/pixshow.html

Det er ikke det jeg leder efter.

Jeg leder efter kode som forstørre det samme billed når man pejer på
billedet med musen.

---

scootergrisen skrev:

> Jeg har en side med en masse små billeder.

Prøv at se effekten på http://sxc.hu/ her kan du
se hvad det drejer sig om.

Er det den slags du vil have?

--
Allan Vebel
http://vebel.dk | http://dmwebdesign.dk

---

Den 15-01-2011 02:23, Allan Vebel skrev:
> scootergrisen skrev:
>
>> Jeg har en side med en masse små billeder.
>
> Prøv at se effekten på http://sxc.hu/ her kan du
> se hvad det drejer sig om.
>
> Er det den slags du vil have?
>

Nej det skal ikke være sådan med tooltip.js

Det skal være ligesom google billed søgning hvor det er det samme billed
som man peger på som forstørres.

Med tooltip.js skal man have 2 billeder. Et lille og et stort og det
store vises kun når musen er over.
Det er ikke så godt fordi der skal være mange billeder på siden så det
bliver tungt.

Koden skulle gerne være noget i stil med :


<script type="text/javascript" src="zoomkode.js"></script>

<div id="zoombilleder">
<img src="billed1.jpg"/>
<img src="billed2.jpg"/>
<img src="billed3.jpg"/>
<img src="billed4.jpg"/>
<img src="billed5.jpg"/>
</div>

---

scootergrisen skrev den 15-01-2011:
> Den 15-01-2011 02:23, Allan Vebel skrev:
>> scootergrisen skrev:
>>
>>> Jeg har en side med en masse små billeder.
>>
>> Prøv at se effekten på http://sxc.hu/ her kan du
>> se hvad det drejer sig om.
>>
>> Er det den slags du vil have?
>>
>
> Nej det skal ikke være sådan med tooltip.js
>
> Det skal være ligesom google billed søgning hvor det er det samme billed som
> man peger på som forstørres.
>
> Med tooltip.js skal man have 2 billeder. Et lille og et stort og det store
> vises kun når musen er over.
> Det er ikke så godt fordi der skal være mange billeder på siden så det bliver
> tungt.
>
> Koden skulle gerne være noget i stil med :
>
>
> <script type="text/javascript" src="zoomkode.js"></script>
>
> <div id="zoombilleder">
> <img src="billed1.jpg"/>
> <img src="billed2.jpg"/>
> <img src="billed3.jpg"/>
> <img src="billed4.jpg"/>
> <img src="billed5.jpg"/>
> </div>

Du kan ikke gøre et billede større. Det vil blive pixelleret - vist i
firkantede blokke - og kvaliteten af den slags er elendig.
Alternativet er at bruge et stort billede med for lille height/with -
hvilket til gengæld er spild af båndbredde.
Du kan med et ss-script levere en mindre udgave af et stort billede til
det lille billede - og det koster tid på serveren (men er til at leve
med, så længe der ikke er mange billeder).

Selve funktionen er vel enkel nok. Det handler om mouseover eventen -
og mouseout, sammen med mouseout på det store billede.
Det burde du - så vidt jeg kan vurdere - godt kunne finde ud af at
skrive selv.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

> Du kan ikke gøre et billede større. Det vil blive pixelleret - vist i
> firkantede blokke - og kvaliteten af den slags er elendig.

Mit spørgsmål handler ikke om billedkvalitet.

> Alternativet er at bruge et stort billede med for lille height/with -
> hvilket til gengæld er spild af båndbredde.

Det er ikke spild når billedet forstørres når man holder musen over
billedet.

> Selve funktionen er vel enkel nok. Det handler om mouseover eventen - og
> mouseout, sammen med mouseout på det store billede.
> Det burde du - så vidt jeg kan vurdere - godt kunne finde ud af at
> skrive selv.

Birger hvis jeg kunne skrive den selv så spurgte jeg jo ikke her.

---

scootergrisen kom med denne ide:
>> Du kan ikke gøre et billede større. Det vil blive pixelleret - vist i
>> firkantede blokke - og kvaliteten af den slags er elendig.
>
> Mit spørgsmål handler ikke om billedkvalitet.
>
>> Alternativet er at bruge et stort billede med for lille height/with -
>> hvilket til gengæld er spild af båndbredde.
>
> Det er ikke spild når billedet forstørres når man holder musen over billedet.
>
>> Selve funktionen er vel enkel nok. Det handler om mouseover eventen - og
>> mouseout, sammen med mouseout på det store billede.
>> Det burde du - så vidt jeg kan vurdere - godt kunne finde ud af at
>> skrive selv.
>
> Birger hvis jeg kunne skrive den selv så spurgte jeg jo ikke her.

<img src="billed1" (lille størrelse onmouseover="VisBilled(
'l_img1');">
<div id="l_img_1" class="img_hold"><img src="billed1" (rigtig
størrelse) ... ommouseout="SkjulBilled( 'l_img_1');">
CSS skal skjulee klasse .img_hold
I JS skal du så bare vise den pågældende div i VisBilled() og skjule
den i SkjulBilled().

function VisBilled( l_img) {
var i_elm = document.getElementById( l_img);
if ( i_elm) { i_elm.display = 'block'; }
}

function SkjulBilled( l_img) {
var i_elm = document.getElementById( l_img);
if ( i_elm) { i_elm.display = 'none'; }
}

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen frembragte:
> scootergrisen kom med denne ide:
>>> Du kan ikke gøre et billede større. Det vil blive pixelleret - vist i
>>> firkantede blokke - og kvaliteten af den slags er elendig.
>>
>> Mit spørgsmål handler ikke om billedkvalitet.
>>
>>> Alternativet er at bruge et stort billede med for lille height/with -
>>> hvilket til gengæld er spild af båndbredde.
>>
>> Det er ikke spild når billedet forstørres når man holder musen over
>> billedet.
>>
>>> Selve funktionen er vel enkel nok. Det handler om mouseover eventen - og
>>> mouseout, sammen med mouseout på det store billede.
>>> Det burde du - så vidt jeg kan vurdere - godt kunne finde ud af at
>>> skrive selv.
>>
>> Birger hvis jeg kunne skrive den selv så spurgte jeg jo ikke her.
>
> <img src="billed1" (lille størrelse onmouseover="VisBilled( 'l_img1');">
> <div id="l_img_1" class="img_hold"><img src="billed1" (rigtig størrelse) ...
> ommouseout="SkjulBilled( 'l_img_1');">
> CSS skal skjulee klasse .img_hold
> I JS skal du så bare vise den pågældende div i VisBilled() og skjule den i
> SkjulBilled().
>
> function VisBilled( l_img) {
> var i_elm = document.getElementById( l_img);
> if ( i_elm) { i_elm.display = 'block'; }
> }
>
> function SkjulBilled( l_img) {
> var i_elm = document.getElementById( l_img);
> if ( i_elm) { i_elm.display = 'none'; }
> }
>
> Birger

Det må egentlig kunne lade sig gøre med ren css....

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

> Det må egentlig kunne lade sig gøre med ren css....
>
> Birger
>

Det var meget godt du skrev det fordi det kan lade sig gøre fandt jeg ud af.
Først havde jeg tænkt mig det skulle være med animation ligesom jeg
havde set det til at starte med og det er jo nok javascript det gør at
billedet langsomt bliver større men jeg vil hellere have ren CSS og det
fandt jeg så her : http://www.cssplay.co.uk/menu/lightbox.html

Det var på den her side jeg fandt linket :
http://randsco.com/index.php/2005/01/31/css_photo_caption_zoom
Der er også en smart måde at få forstørret et billed blot ved at holde
musen over det.

---

Den 15-01-2011 05:54, scootergrisen skrev:
>> Du kan ikke gøre et billede større. Det vil blive pixelleret - vist i
>> firkantede blokke - og kvaliteten af den slags er elendig.
>
> Mit spørgsmål handler ikke om billedkvalitet.
>
>> Alternativet er at bruge et stort billede med for lille height/with -
>> hvilket til gengæld er spild af båndbredde.
>
> Det er ikke spild når billedet forstørres når man holder musen over
> billedet.
>
Det er spild, hvis din side er fyldt med 50 thumbnails af 1MB og loader
langsomt, når det slet ikke er sikkert brugeren ønsker at se det i stort
format.

Det er ikke et problem at lave serverside; jeg bruger på nogle sites at
have thumbnails som http://site.dom/resized/50/80/images/eksempel.jpg
Findes billedet, serveres det bare.
Findes billedetet ikke tager en custom 404-side /images/eksempel.jpg,
skalerer det i 50*80, lægger det på disken til næste gang, og serverer
det for brugeren.

I øvrigt irriterer det mig, når mange webshops bruger små billeder, og
at "Vis dette billede i stor størrelse" bliver til "Vis dette billede i
samme størrelse i en stor ramme"

Leif
--
Bevar P2, luk P3, der er nok P3'er i forvejen.

---

> Det er ikke et problem at lave serverside; jeg bruger på nogle sites at
> have thumbnails som http://site.dom/resized/50/80/images/eksempel.jpg
> Findes billedet, serveres det bare.
> Findes billedetet ikke tager en custom 404-side /images/eksempel.jpg,
> skalerer det i 50*80, lægger det på disken til næste gang, og serverer
> det for brugeren.

Jeg syns bare ik der er nogen grund til at lave thumbnails ud af
billederne når de i forvejen ik er specielt store.

> I øvrigt irriterer det mig, når mange webshops bruger små billeder, og
> at "Vis dette billede i stor størrelse" bliver til "Vis dette billede i
> samme størrelse i en stor ramme"

Yep det kender jeg godt.
De har nok bare sat nogen billeder ind også står der "forstør billed"
som standard uden at det nødvendig passer. Men folk kender det jo og er
vandt til at blive skuffet.

---

scootergrisen skrev:

> Det skal være ligesom google billed søgning
> hvor det er det samme billed som man peger
> på som forstørres.

Ja, det er det jeg mener, se:
http://www.sxc.hu/browse.phtml?f=search&txt=web&w=1

Det virker da noget mere elegant end det Google
har lavet.

--
Allan Vebel
http://vebel.dk | http://dmwebdesign.dk

---

>> Det skal være ligesom google billed søgning
>> hvor det er det samme billed som man peger
>> på som forstørres.
>
> Ja, det er det jeg mener, se:
> http://www.sxc.hu/browse.phtml?f=search&txt=web&w=1
>
> Det virker da noget mere elegant end det Google
> har lavet.

Det går 1-2 sekunder fra man holder musen over til hvert billed bliver
vist. Det gider jeg ikke. Men jeg har også fundet en løsning.

Jeg bruger dog den metode som på
http://www.sxc.hu/browse.phtml?f=search&txt=web&w=1 på nogen steder på
min hjemmeside men lige på det her syns jeg ikke det virker så godt.