Galleri med mouseover-effekt
Marcia Bossen Braddy
Jeg overvejer at lave et galleri p� en af mine sider, hvor min
tanke er at inds�tte alle billederne i thumbnail-st�rrelse. Jeg
ville helst undg� at man skal �bne et nyt vindue for at se
billedet i st�rre st�rrelse, s� forestiller mig at det kunne v�re
smart at man ved en eller anden mouseover-funktion kan se
billedet i st�rre st�rrelse.
Har fundet f�lgende:
http://www.html.dk/scripts/javascript/00001/
og det virker for s� vidt efter hensigten n�r der kun er de to
billeder, men hvordan f�r jeg det til at "spille" med m�ske 50
forskellige billeder?
Pft.
Marcia
--
Vil du l�re at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- P�dagogiske tutorials p� dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
Kerim Ellentoft
>og det virker for s� vidt efter hensigten n�r der kun er de to
>billeder, men hvordan f�r jeg det til at "spille" med m�ske 50
>forskellige billeder?
G�r ud fra, at du vil ha', at det er er fx. 25 billeder, der skal
skiftes til et andet, p� samme m�de som p� siden.
P� de efterf�lgende �ndrer du blot 'eksempel' til noget andet, fx
'eksempel2' 'eksempel3' osv.
--
Kerim
http://www.facebook.com/kerim.ellentoft
Marcia Bossen Braddy
> skiftes til et andet, p� samme m�de som p� siden.
Ja alts� jo egentlig det samme billede, men i et st�rre format.
> P� de efterf�lgende �ndrer du blot 'eksempel' til noget andet, fx
> 'eksempel2' 'eksempel3' osv.
Jeg m� indr�mme jeg ikke helt forst�r. Selv om det er strengt
forbudt, har jeg alligevel indsat, hvad jeg har fors�gt uden alt det
udenom :-) Som det nok fremg�r er jeg helt blank p� javascript!
<script type="text/javascript">
billede1 = new Image();
billede1.src = "billede1.gif";
billede2 = new Image();
billede2.src = "billede2.gif";
billede3 = new Image();
billede3.src = "billede3.gif";
billede4 = new Image();
billede4.src = "billede3.gif";
function skiftbillede(img_name,img_src) {
document[img_name].src=img_src;
}
// Slut -->
</script>
</head>
<body>
<a href="http://www.html.dk"
onmouseover="skiftbillede('eksempel','billede2.gif')"
onmouseout="skiftbillede('eksempel','billede1.gif')">
<img name="eksempel" src="billede1.gif" alt="F�r musen over dette
billede"
style="border:none;" /></a>
<a href="http://www.html.dk"
onmouseover="skiftbillede('eksempel','billede4.gif')"
onmouseout="skiftbillede('eksempel','billede3.gif')">
<img name="eksempel" src="billede3.gif" alt="F�r musen over dette
billede"
style="border:none;" /></a>
Men det virker ikke...?
Marcia Bossen Braddy
Jeg fors�gte mig lidt mere frem og fandt svaret, men det ser ikke
s�rligt tjekket ud... Kan man g�re det s�dan at det billede, der kommer
frem ved mouseover d�kker de andre billeder p� siden, s� det hele ikke
hopper rundt?
Birger Sørensen
> ANNULLER SIGNAL! :-)
>
> Jeg forsï¿œgte mig lidt mere frem og fandt svaret, men det ser ikke
> sï¿œrligt tjekket ud... Kan man gï¿œre det sï¿œdan at det billede, der kommer
> frem ved mouseover dￜkker de andre billeder pￜ siden, sￜ det hele ikke
> hopper rundt?
Her er vi sￜ nￜdt til at have et link.
Der er ikke mange andre end dig selv der kan se hvad der sker pￜ din
skï¿œrm...
Birger
--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk
Marcia Bossen Braddy
> Marcia Bossen Braddy skrev den 11-11-2009:
> > ANNULLER SIGNAL! :-)
> >
> > s�rligt tjekket ud... Kan man g�re det s�dan at det billede, der kommer
> > frem ved mouseover d�kker de andre billeder p� siden, s� det hele ikke
> > hopper rundt?
>
> Her er vi s� n�dt til at have et link.
> Der er ikke mange andre end dig selv der kan se hvad der sker p� din
> sk�rm...
>
:-) Ja, det er jo det! Har ikke lige mulighed for at l�gge det noget sted
hen lige pt., men m� ogs� indr�mme, at jo mere jeg ser p� det, jo mere kan
jeg se, at det ikke vil virke!
Udfordringen var at mouseoverbilledet var st�rre end det almindeligt synlige
billede og mouseover medf�rte at alt andet p� siden skubbes rundt, s� der
var plads til det store mouseoverbillede.
Tror jeg m� finde en anden l�sning!
Tak for svar til jer begge!
Marcia
> Birger
> > --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
>
Kerim Ellentoft
>Tror jeg m� finde en anden l�sning!
Kig p� http://dynamicdrive.com, der er masser af den slags og
sikkert ogs� noget du kan bruge.
--
Kerim
http://www.facebook.com/kerim.ellentoft
Jørgen Farum Jensen
> Hej NG
>
> Jeg overvejer at lave et galleri p� en af mine sider, hvor min
> tanke er at inds�tte alle billederne i thumbnail-st�rrelse. Jeg
> ville helst undg� at man skal �bne et nyt vindue for at se
> billedet i st�rre st�rrelse, s� forestiller mig at det kunne v�re
> smart at man ved en eller anden mouseover-funktion kan se
> billedet i st�rre st�rrelse.
Form�let med et billedgalleri af sm�billeder er
at siden med sm�billeder kan indl�ses meget hurtigere
end en side med de store billeder. N�r man s� klikker p�
et sm�billede, indl�ses det store billede. Derved tager
brugeren selv beslutningen om, hvorvidt han/hun vil
bruge b�ndbredde p� at indl�se det store billede.
Den fordel g�r fl�jten, hvis du vil vise det store
billede ved mouseover. S� skal billedet nemlig v�re
indl�st p� forh�nd.
Et moderne billedgalleri finder du her:
http://webdesign101.dk/galleri/galleri.php
Dit �nske om at vise det store billede s� det
lissom sv�ver over siden l�ses lettest med
Lightbox, se eksemplet:
http://webdesign101.dk/galleri/eksempler/galleri_4.php
--
Med venlig hilsen
J�rgen Farum Jensen
H�ndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
.
Stig Johansen
> Udfordringen var at mouseoverbilledet var st�rre end det almindeligt
> synlige billede og mouseover medf�rte at alt andet p� siden skubbes rundt,
> s� der var plads til det store mouseoverbillede.
>
> Tror jeg m� finde en anden l�sning!
Du skal have fat i noget z-index.
Jeg bruger det rundt omkring her:
<http://w-o-p-r.dk/gallery/>
Det er kun nogle eksperimenter, men der kan du se hvordan man kan f�
billedet til at blive st�rre uden at resten skubber sig.
Oversigterne skubber sig i IE6, men virker vistnok i IE8, s� det gider jeg
ikke g�re noget ved.
--
Med venlig hilsen
Stig Johansen
Stig Johansen
> Et moderne billedgalleri finder du her:
> http://webdesign101.dk/galleri/galleri.php
Du skal nok lige kigge p� dette her afsnit fra 'noderne' galleri:
....
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
....
Det er ikke liige den m�de, man g�r det p�.
> Dit �nske om at vise det store billede s� det
> lissom sv�ver over siden l�ses lettest med
> Lightbox, se eksemplet:
>
> http://webdesign101.dk/galleri/eksempler/galleri_4.php
Her vil jeg foresl� dig at bruge + og - til navigering.
Det er ikke skide smart at bruge pilene da de benyttes til vandret scroll.
Ok, kan man leve med, at man '�del�gger' brugerens navigeringsmuligheder, s�
fred v�re med det.
Jeg synes ogs� du skulle overs�tte til dansk, s� der ikke st�r image x of y
- next og prev.
Marcia Bossen Braddy
Jørgen Farum Jensen
> J�rgen Farum Jensen wrote:
>
>> Et moderne billedgalleri finder du her:
>> http://webdesign101.dk/galleri/galleri.php
>
> Du skal nok lige kigge p� dette her afsnit fra 'noderne' galleri:
Du synes at antyde en stavefejl p� siden, men jeg kan
ikke lige finde den. Eller ogs� synes du at jeg tager
munden for fuld med brug af ordet 'moderne'. Det er
i hvert fald moderne i forhold til window.open(...)
og onclick="showPix(n);return false;"
> ....
> function addLoadEvent(func) {
> var oldonload = window.onload;
> if (typeof window.onload != 'function') {
> window.onload = func;
> } else {
> window.onload = function() {
> oldonload();
> func();
> }
> }
> }
> ....
> Det er ikke liige den m�de, man g�r det p�.
Tak for dit input. Hvordan g�r "man" s�?
Jeg indr�mmer blankt at jeg har "nolet" dette
script. Det skete efter megen l�sning om w3c's eventmodel
vs. IE's eventmodel og problemerne med at foretage
flere end �n initieringsfunktion v.h.a. onload
eventhandleren. Det blev jeg kun s� meget klogere
af at jeg var i stand til at finde den l�sning, som
flere forfattere og JavaScript kyndige (minus
Peter-Paul Koch og Chr. Heillman hvis evner til at
forklare tingene er omvendt proportional med
deres viden om emnet) synes er lille og snild.
PS om dette: Hvor ville jeg �nske at en dansk forfatter
ville s�tte sig ned og ud fra dansk l�re- og
fagbogstradition ville skrive en bog om JavaScript.
Det bedste vi har er Kr. Hansens "JavaScript program-
mering" fra 2004, og den har ikke et ord (som jeg kan
finde) om W3C event handling og unobtrusive scripting.
> Her vil jeg foresl� dig at bruge + og - til navigering.
> Det er ikke skide smart at bruge pilene da de benyttes til vandret scroll.
>
> Ok, kan man leve med, at man '�del�gger' brugerens navigeringsmuligheder, s�
> fred v�re med det.
Had '�del�gger' jeg egentlig n�r jeg pr�diker svovl
og helvedesild for fikserede bredder? Hvor tit
ser vi i grunden en vandret rulleskat? Men ok, du
har principielt ret. Det n�ste sp�rgsm�l er s�,
hvad der er mest intuitivt?
> Jeg synes ogs� du skulle overs�tte til dansk, s� der ikke st�r image x of y
> - next og prev.
>
Nu er artiklen jo ikke "mit" billedvisningsprogram -
jeg klarer mig udm�rket med Picasa - men et forslag
til hvordan man kunne g� frem, hvis man absolut vil
lave sit eget. Du arbejder jo selv p� s�dan et forslag,
ikke sandt?
Men ok, ogs� her har du ret, s� meget des mere som
det ikke er helt indlysende for en overfladisk betragt-
ning hvor det lige er, man g�r det.
Det er s� f�jet til min ToDo-list.
Stig Johansen
> Stig Johansen skrev:
>>
>> Du skal nok lige kigge p� dette her afsnit fra 'noderne' galleri:
>
> Du synes at antyde en stavefejl p� siden, men jeg kan
> ikke lige finde den.
Nej, det var en sl�fejl fra min side.
Jeg hentydede til javascriptet:
>> ....
>> function addLoadEvent(func) {
>> var oldonload = window.onload;
>> if (typeof window.onload != 'function') {
>> window.onload = func;
>> } else {
>> window.onload = function() {
>> oldonload();
>> func();
>> }
>> }
>> }
>> ....
>> Det er ikke liige den m�de, man g�r det p�.
>
> Tak for dit input. Hvordan g�r "man" s�?
> Jeg indr�mmer blankt at jeg har "nolet" dette
> script. Det skete efter megen l�sning om w3c's eventmodel
> vs. IE's eventmodel og problemerne med at foretage
> flere end �n initieringsfunktion v.h.a. onload
> eventhandleren. Det blev jeg kun s� meget klogere
> af at jeg var i stand til at finde den l�sning, som
> flere forfattere og JavaScript kyndige (minus
> Peter-Paul Koch og Chr. Heillman hvis evner til at
> forklare tingene er omvendt proportional med
> deres viden om emnet) synes er lille og snild.
Jo, men den stump du har fundet benytter hverken W3's model eller IE's
model.
W3's model er addEventlistener, IE's er attachEvent, og s� er der resten.
Jeg skal nok komme med et eksempel, men det ligger p� en anden maskine, s�
det kommer i et separat indl�g.
>> Ok, kan man leve med, at man '�del�gger' brugerens navigeringsmuligheder,
>> s� fred v�re med det.
>
> Had '�del�gger' jeg egentlig n�r jeg pr�diker svovl
> og helvedesild for fikserede bredder? Hvor tit
> ser vi i grunden en vandret rulleskat? Men ok, du
> har principielt ret. Det n�ste sp�rgsm�l er s�,
> hvad der er mest intuitivt?
Had = Hvad?
Det kommer selvf�lgelig an p� brugen af det.
Hvis man sikrer sig, at billederne aldrig bliver st�rre end de kan v�re p�
sk�rmen, s� vil der ikke v�re noget 'problem'.
Men hvis man gerne vil l�gge lidt st�rre billeder op, for at f� detaljer
med, s� kommer der en vandret scrollbar.
Det er selvf�lgelig smag og behag, og jeg vil give dig ret i, at pilene er
mere intuitivt, s� det er nok et trade off.
>> Jeg synes ogs� du skulle overs�tte til dansk, s� der ikke st�r image x of
>> y - next og prev.
>>
> Nu er artiklen jo ikke "mit" billedvisningsprogram -
> jeg klarer mig udm�rket med Picasa - men et forslag
> til hvordan man kunne g� frem, hvis man absolut vil
> lave sit eget. Du arbejder jo selv p� s�dan et forslag,
> ikke sandt?
>
> Men ok, ogs� her har du ret, s� meget des mere som
> det ikke er helt indlysende for en overfladisk betragt-
> ning hvor det lige er, man g�r det.
Det var kun for din egen skyld.
Du kunne lave en kort notits om hvor man g�r det.
Det ligger ogs� p� den anden maskine, s� jeg vender tilbage i et andet
indl�g.
Stig Johansen
"J�rgen Farum Jensen" <jfje...@yahoo.dk> wrote in message
news:4afc3ac4$0$36570$edfa...@dtext01.news.tele.dk...
> Tak for dit input. Hvordan g�r "man" s�?
Jeg skulle lige rode lidt i gemmerne, men jeg lavede noget eksempel engang
p� navigering med b�de pile og +/-.
Det var kun for at illustrere scriptet, s� det g�r ikke andet end at skifte
URL:
http://w-o-p-r.dk/tips/asp/kurt.pile.asp?Billede=1
Men selve onloaden bliver lavet s�dan her:
....
if ( window.addEventListener ) {
window.addEventListener ('load',initiate_pile,false) ;
} else if( window.attachEvent ) {
window.attachEvent ('onload',initiate_pile) ;
} else {
window.onload = initiate_pile ;
}
....
Dvs pseudo:
if W3C
else if IE
else assign r�t.
Erstat initiate_pile med
prepareGallery i dit tilf�lde.
> Du arbejder jo selv p� s�dan et forslag,
> ikke sandt?
Ikke helt det samme.
Det jeg roder med er dynamisk og databasedrevet, hvor man selv kan angive
nogle f� styles og templates, og s� klarer systemet resten.
Egentlig har det ogs� noget at g�re med, at man ikke skal kaste med �bler
hvis man selv er et skrog.
S� n�r jeg brokker mig over de her helvedesmaskiner til javascript, bliver
jeg n�dt til at komme med alternative forslag.
> Men ok, ogs� her har du ret, s� meget des mere som
> det ikke er helt indlysende for en overfladisk betragt-
> ning hvor det lige er, man g�r det.
>
> Det er s� f�jet til min ToDo-list.
N�r (hvis) du kommer dertil, s� er her lidt info:
* ad 'image' m.v.
Jeg har ikke lige linienumrene, men i dit lightbox js er der denne sektion:
....
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
....
Her vil jeg g�tte p�, at du bare skal �ndre Image til Billede og of til af.
*ad prev/next
De ligger som billeder her:
http://webdesign101.dk/galleri/eksempler/js/images/prevlabel.gif
og
http://webdesign101.dk/galleri/eksempler/js/images/nextlabel.gif
som er defineret i CSS'et.
S� der skal nok laves et par nye billeder.
* ad close
Det er ogs� et billede, som bliver defineret i js'et:
....
LightboxOptions = Object.extend({
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
....S� det er vel ogs� bare et andet billede.N�h - hov, disse 2 giver en 404
not found, men du har heller ikke 'close' p� det eksempel.Som n�vnt kunne du
lave en lille beskrivelse p� din side om hvordan man retter disse ting.
--
Med venlig hilsen/Best regards
Stig Johansen
Allan Vebel
> http://w-o-p-r.dk/tips/asp/kurt.pile.asp?Billede=1
Hm, det hedder noget med billede, men der er
kun tekst;o)
--
Allan Vebel
http://vebel.dk | http://html-faq.dk
Rune Jensen
> Stig Johansen skrev:
>
>> http://w-o-p-r.dk/tips/asp/kurt.pile.asp?Billede=1
>
> Hm, det hedder noget med billede, men der er
> kun tekst;o)
Med lidt beh�ndighed, kan det laves, s� man kan s�tte sin egen variabel
ind, s� det er et meget brugbart script til mange funktioner. Hvis det
er, skal jeg lave et lille tool til det, s� man selv kan definere taster
og variabel samt min og maks.
T�nk gallerier, men ogs� f.eks. ogs� paging af kommentar-sider. S�
�ndres variablen bare til side=
Variablen er ikke afg�rende, det er derimod funktionen. Man har en
minimum og en maksimum, og derimellem kan man s� navigere via piletaster.
Den bliver i�vrigt brugt her p� dit eget galleri, hvor billedet er
defineret ved variablen id:
http://www.webdesigngruppen.dk/galleri/thebigpicture.asp?medlem=allan+vebel&year=2009&layout=galleri&id=0
...det k�rer s� bare ikke AJAX - endnu ;)
Det er s� Stig, som har lavet scriptet, kke mig, men n�r man kan se
mulighederne, s� er det ganske brugbart.
MVH
Rune Jensen
Rune Jensen
> Variablen er ikke afg�rende, det er derimod funktionen.
I�vrigt var det vidst et fors�g p� at vise brug af event listeners mere
end funktionen som s�dan, men det �ndrer jo ikke p�, at funktionen (med
navigering) er ret nyttig ;)
MVH
Rune Jensen
Stig Johansen
> Stig Johansen skrev:
>
>> http://w-o-p-r.dk/tips/asp/kurt.pile.asp?Billede=1
>
> Hm, det hedder noget med billede, men der er
> kun tekst;o)
Ja, og der hedder noget med kurt i url'en, fordi han havde brug for at kunne
navigere med pile i sit galleri, og der brugte han &Billede=xx
S� det var lavet s� han kunne copy/paste det direkte over i hans projekt.
Stig Johansen
> Den bliver i�vrigt brugt her p� dit eget galleri, hvor billedet er
> defineret ved variablen id:
>
http://www.webdesigngruppen.dk/galleri/thebigpicture.asp?medlem=allan+vebel&year=2009&layout=galleri&id=0
>
> ...det k�rer s� bare ikke AJAX - endnu ;)
N�r/hvis du engang kommer dertil, s� kan du se et eksempel her:
<http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryName=ajax_test&GalleryOwner=Stig%20Johansen>
Her har jeg sat antal billeder pr. 'klods' til 4, s� skift af 'klods'
foreg�r med Ajax, eller rettere SJAT (Synchroneus Javascript And Text:).
Jeg har ogs� leget lidt med at trykke s (tasten) for slideshow, og b for
bagl�ns.
Det er dog kun nogle fors�g, s� hvis man aktiverer b mens den er i gang med
s, bliver den lidt forvirret.
Stig Johansen
>
> N�r/hvis du engang kommer dertil, s� kan du se et eksempel her:
>
<http://w-o-p-r.dk/gallery/gallery.show.this.asp?GalleryName=ajax_test&GalleryOwner=Stig%20Johansen>
Det er s� ikke unobtrusive (endnu?).
Jeg ved ikke rigtig om det har nogen v�rdi, for det er jo dynamisk
genereret, men hvis man vil lave det unobtrusive, er det bare at hive
javascriptet ud i head eller extern fil.
Helt fri for javascript kan det dog aldrig blive, da noget af det er dannet
ud fra parametre i databasen.