|
|
 | Galleri med mouseover-effekt
Fra : Marcia Bossen Braddy |
Dato : 11-11-09 18:42 |
|
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.
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 (11-11-2009)
| Kommentar
Fra : Kerim Ellentoft |
Dato : 11-11-09 19:51 |
|
Marcia Bossen Braddy <marciabb@email.dk> skrev :
>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 (11-11-2009)
| Kommentar
Fra : Marcia Bossen Braddy |
Dato : 11-11-09 20:44 |
|
> 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.
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...?
--
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
| |
 Marcia Bossen Braddy (11-11-2009)
| Kommentar
Fra : Marcia Bossen Braddy |
Dato : 11-11-09 20:56 |
|
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?
--
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
| |
Birger Sørensen (11-11-2009)
| Kommentar
Fra : Birger Sørensen |
Dato : 11-11-09 21:05 |
|
Marcia Bossen Braddy skrev den 11-11-2009:
> 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 (11-11-2009)
| Kommentar
Fra : Marcia Bossen Braddy |
Dato : 11-11-09 21:41 |
|
Birger Sørensen wrote in dk.edb.internet.webdesign.clientside:
> Marcia Bossen Braddy skrev den 11-11-2009:
> > 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...
>
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
>
>
--
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 (12-11-2009)
| Kommentar
Fra : Kerim Ellentoft |
Dato : 12-11-09 00:04 |
| | |
Stig Johansen (12-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 12-11-09 00:48 |
|
Marcia Bossen Braddy wrote:
> 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
| |
Jørgen Farum Jensen (12-11-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 12-11-09 00:26 |
|
Marcia Bossen Braddy skrev:
> 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 (12-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 12-11-09 01:10 |
|
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:
.....
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.
--
Med venlig hilsen
Stig Johansen
| |
Jørgen Farum Jensen (12-11-2009)
| Kommentar
Fra : Jørgen Farum Jensen |
Dato : 12-11-09 17:42 |
|
Stig Johansen skrev:
> 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.
--
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 (12-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 12-11-09 19:36 |
|
Jørgen Farum Jensen wrote:
> 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.
--
Med venlig hilsen
Stig Johansen
| |
Stig Johansen (12-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 12-11-09 20:29 |
|
Opfølgning på andet indlæg.
"Jørgen Farum Jensen" <jfjenzen@yahoo.dk> wrote in message
news:4afc3ac4$0$36570$edfadb0f@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 (12-11-2009)
| Kommentar
Fra : Allan Vebel |
Dato : 12-11-09 22:51 |
| | |
Rune Jensen (12-11-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 12-11-09 23:13 |
|
Allan Vebel skrev:
> 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 
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 (12-11-2009)
| Kommentar
Fra : Rune Jensen |
Dato : 12-11-09 23:31 |
|
Rune Jensen skrev:
> 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 (13-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 13-11-09 02:02 |
| | |
Stig Johansen (13-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 13-11-09 02:14 |
|
Stig Johansen wrote:
>
> 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.
--
Med venlig hilsen
Stig Johansen
| |
Stig Johansen (13-11-2009)
| Kommentar
Fra : Stig Johansen |
Dato : 13-11-09 01:54 |
|
Allan Vebel wrote:
> 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
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.
--
Med venlig hilsen
Stig Johansen
| |
Marcia Bossen Braddy (12-11-2009)
| Kommentar
Fra : Marcia Bossen Braddy |
Dato : 12-11-09 15:56 |
|
Jeg takker endnu engang for flere konstruktive forslag
--
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
| |
|
|