een afbeelding vergroten bij mouse over of mouseclick

[saskiab]

hoi,

is er een mogelijkheid om in html in dreamweaver mx 2004 een vergroting van een afbeelding te laten zien bij klik of als je met de muis erover gaat? en hoe doe je dat?

ik heb wel al wat geprobeerd met deze aanbieder: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

maar dit werkt dus niet, want ik krijg de afbeelding direct onder mijn thumb te zien.

Ik had ook al bedacht van: een open browser window als behaviour maar dat lijkt me erg onhandig want dan zou ik voor elke foto een aparte html pagina moeten maken en de afmetingen invoeren. niet te doen en hoe veel html pagina's krijg ik dan wel niet als ik 50 foto's heb.

mijn site is nu zo: http://www.bouwbedrijfstegeman.nl/hobbygaragewebsite/armbandenpage1.htm

en dit heb ik gewoon in de property inspector gedaan. als imag de thumb invoeren en dan de link is het plaatje. nu vind ik dit lang zo mooi niet dan als je een popup krijgt van het plaatje. maar ik wil het graag vanuit dreamweaver doen omdat ik anders dus echt niet snap waar ik de code in moet zetten in mijn bestand. wat ik hiervoor al zei en probeerde wilde al niet werken. en straks verknoei ik de hele code en ziet mijn pagina er niet meer uit.

groetjes saskia

 

[hanna]

Waarom doe je het niet met Lightbox?

Zie hier de uitleg.

of deze

 

[saskiab]

hoi,

oke maar die had ik al gezien alleen ik weet nooit waar ik het in de code moet zetten als er al van alles in staat. ik maak gebruik van templates, tabellen editable region etc etc. dus waar prop ik het dan tussen? en is het niet ontzettend veel werk om elk thumb de code voor pop up er in de code te plaatsen dan? is het niet vanuit dreamweaver mx een een of ander methode omdat direct simpel te doen? net als een image rollover invoegen werkt?

groetjes saskia

 

[saskiab]

hoi,

nog iets: dat het plaatje van de links van lightbox 2 zo langzaam laad in het voorbeeld op die site komt dat door de lightbox of door de grootte van hun plaatje?
Ik heb nog even over het web gesurfd maar ik kom er nog steeds niet uit :

- kan het wel in html zonder css want ik weet dat ik css maken kan met dreamweaver maar heb geen idee wat het verschil is met html. ik dacht dat alle paginas altijd uit html bestaan?

- als ik de zip klik moet ik dan openen of opslaan kiezen? en waar sla ik het dan op?

- als ik een paginaopbouw heb die er als volt uitziet:

sieraden

->armbanden
->kettingen
->ringen

waar zet ik dan dat zip bestand in op mijn local folder? daar in de map waar alle html pagina's ook staan? en gaan dan niet de plaatjes van de pagina's die geen pop up hoeven niet ineens ook meedoen?
echt ik snap er nog niets van en ben zo bang dat ik straks de hele pagina's opnieuw kan gaan doen. en dat wil ik naturlijk niet.
sorry jullie zukllen wel denken wat een domme gans! maar ik kan me er nog niets bij voorstellen.ben al blij met dat wat ik nu wél kan en ja dan ga je uitbreiden.
albvast bedankt!

 

[hanna]

Ja, kijk als je niets van de code weet dan wordt het heel moeilijk uitleggen, want alles wat ik weet daarvoor zul je toch in de code moeten.

Anders moet je dit maar eens proberen
of dit dan werk je gewoon in DW

 

[saskiab]

hoi hanna,

nou in zoverre dat misschien lukt het wel maar dan zou het makkelijker worden als ik de vragen beantwoord kreeg van hiervoor. nl. waar de code moet staan waar doe ik de css pagina oid heen.

het open browser window heb ik zelf ook aal aan gedacht maar met meer dan 50 foto's krijg je ook net zoveel html pagina's die ik moet aanmaken. want de open browser window moet ook ergens naar toe linken. dan kan ik volgens mij net zo goed doen wat ik nu al heb alleen dan bijv. ipv blank parent of self oid invullen zodat mensen op mijn pagina blijven.

groetjes saskia

 

[hanna]

In de 2 handleidingen waarvan ik de URL's hier neer heb gezet wordt alles duidelijk uitgelegd.

 

[saskiab]

oke heb direct al het eerste probleem te pakken. ik kan het dus niet voor de head tag plaatsen want die is afgeschermd omdat ik gebruik maak van templates. komt het goed als ik het dan in de template ga zetten? want als ik dus straks ga testen moet ik het saven en als er ergens een fout zit kan ik zeker al mijn werk overnieuw gaan doen en dat was al zo'n gedoe.

dus wil wel zeker weten dat er geen andere dingen verstrooid raken door die aanpassingen

en kan het zijn dat je pc de bestanden al zelf uitpakt want als ik op alles uitpakken klik zegt hij dat er al een bestand genaamd css is en of ik opnieuw wil proberen oa annuleren enz.

groetjes saskia

 

[saskiab]

en ehm dat icoontje van dreamweaver in het mapje css met de naam lightbox die zet ik dan tussen al mijn andere pagina's of nu juist tussen de templates? want nu gebruikt de template dus de lightbox

 

[saskiab]

en wat bedoelen ze in vredesnaam hiermee?
--------------------------
Waarschijnlijk staat dit standaard goed, maar als je straks je pagina gaat uploaden en er werkt iets niet dan is er een grote kans dat je niet naar de juiste map verwijst in deze bestanden.

Controleer het lightbox.css bestand (in de css map) en kijk of naar de juiste locatie van de bestanden prevlabel.gif en nextlabel.gif wordt verwezen.

Doe hetzelfde in het bestand lightbox.js voor de bestanden loading.gif, closelabel.gif en close.gif.
-----------------------------------
Als ik dat bestand lightbox open vraagt dreamweaver wat te doen. omdat het een alleenlezen bestand is. dan druk ik op view en zie ik de code. ik zie wel ergens de twee bestanden staan waarover ze het hebben maar wat moet ik nu controleren dan?

snap er echt geen bal van.

groetjes saskia

 

[saskiab]

en lightbox.js kan ik geeneens openene

 

[saskiab]

hoi,

word hier langzamaan gek. dit is wat ik doe. ik klik op download en dan save. ik zet hem vervolgens op de c schijf onder mijn rootfolder. hij komt daar dan in te staan met een ritsje op slot. als ik dubbelklik op deze map zie ik de submappen css, js enz. maar in dreamweaver kan ik het zip bestand niet openen. dus probeer ik hem in verkenner maar uit te pakken en dat wil niet want hij geeft steeds aan er is al een bestand met de naam css. als ik vervolgens overslaan doe maakt hij in de rootfolder een nieuwe map met lightbox waar 3 bestandjes van 0 grootte in komen te staan genaamd js css enz. als pictogram zijn het gewoon witte A4-tjes. Wat is nu de bedoeling?

moet ik dan maar gewoon de submappen js, css en images uit het zip-bestand halen en in de rootfolder mikken? en kan ik de index.html direct verwijderen want anders heb ik mijn eigen index.html straks niet meer met saven en ik ben deze toch niet nodig lijkt me.

en nogmaals hoe en waar moet ik dan controleren of de bestandjes prevlabel etc.goed staan ?????

please help ffies

groetjes saskia
( in punt 4 beschreven staat in de uitleg)

 

[saskiab]

is het de bedoeling dat je alle thumbnails in die map images plaatst? of in de code van de css of lightbox.js? want op mijn oude manier is mijn link:

<a href="foto%27s/heren/H001.jpg" target="_blank"><img src="thumbs/heren/H001mini.jpg" width="227" height="190" border="0"></a>

maar in de uitleg van de lightbox gebruik je alleen:

<a href="images/naamfoto.jpg" rel="lightbox" title="Titel van de foto">Foto 1</a>

maar wat vul ik dan in bij images/naamfoto.jpg en moet ik foto 1 ook vervangen door iets?

Ik blijf erbij er moet toch ook een simpeler manier zijn om dit direct vanuit dreamweaver te kunnen doen? net als dat je met een paar klikken een rollover image invoegt(gewoon de link van de twee invullen en klaar)

het kan toch niet zo zijn dat je dit soort dingen buitenom dreamweaver moet doen?

open browser was dus al geen optie he laten we dat voorop stellen.
groetjes saskia

 

[csshunter]

Hoi Saskia,
Je zegt:

Ik blijf erbij er moet toch ook een simpeler manier zijn om dit direct vanuit dreamweaver te kunnen doen? net als dat je met een paar klikken een rollover image invoegt(gewoon de link van de twee invullen en klaar)

Nou, dat zou wel prettig zijn! Maar achter een rollover image zit een script machientje dat er voor zorgt (de function MM_swapImage() ), en als je zoiets wilt als jij, moet er een soortgelijk machientje uitgevonden worden. Ook Lightbox werkt op de achtergrond met een brok geavanceerd javascript, dat je niet zo direct ziet, maar dat er wel is.

Nu heb ik al een tijdje zitten broeden op een voor jou eenvoudige oplossing voor het tonen van de grote afbeeldingen met ene simpele muizeklik. Vandaag is het ei uitgekomen!

Het idee van een css-mouseOver is door de opbouw van je pagina in tabellen niet zo eenvoudig; dan zou je binnen de tabelcellen dingen moeten gaan zetten, wat het er in de code niet overzichtelijker op maakt, en wat waarschijnlijk met Dreamweaver ook heel lastig te doen is als je daar de code in moet duiken. Bovendien moet je met de vergrotingen uit de tabelcellen zien te ontsnappen, maar toch in de buurt blijven; en dat is erg lastig of misschien wel onmogelijk. Eigenlijk zou de hele pagina herschreven moeten worden naar dezelfde layout zonder tabellen.

Maar ik heb het volgende verzonnen:

• je hoeft maar heel weinig in de codering van de pagina aan te passen,
• door het toepassen van "javascript" (dat is een soort opdrachtentaal die automatisch dingen voor je kan regelen),
• het javascript komt gewoon als blokje in de <head> van de pagina te staan (daar hoef je verder niets aan te doen),
• ook in de head komen wat aanvullende css-styles (hoeft ook niets mee te gebeuren).

Het werkt als volgt:

• als je op een kleine afbeelding klikt, wordt eerst de positie van die kleine afbeelding op de pagina onthouden,
• dan wordt er een nog lege container gevuld met de grote afbeelding,
• die container wordt in beeld gebracht,
• en tegelijkertijd wordt de rest van de pagina uitgeschakeld;
• als je op de grote afbeelding klikt, komt er een functie in werking die het omgekeerde doet,
• de grote wordt uitgeschakeld,
• de gewone pagina gaat weer aan,
• en de pagina scrollt uit zichzelf weer naar de plek waar begonnen was.

Voordeel is, dat je op deze manier steeds op dezelfde pagina blijft, al lijkt het of er een pop-up of een nieuwe pagina wordt geopend (dat is dus gezichtsbedrog). Het gaat allemaal zo snel, dat je niet in de gaten hebt wat er precies gebeurt.
Tweede voordeel is van deze methode is, dat de grote afbeeldingen niet allemaal tegelijk tevoren ingeladen hoeven te worden met een preload ofzo, maar dat telkens alleen de grote afbeelding wordt opgevraagd die bij de kleine hoort die je uitvergroot wilt zien. En het opvragen en inladen van één grote afbeelding gaat heel snel.
Nadeel is, dat het met javascript werkt; en sommige mensen hebben dat uit staan, of hebben een browser die niet met javascript overweg kan. Nu hebben verreweg de meeste mensen javascript aan staan, maar voor wie het uit hebben staan is een tip ingebouwd dat ze de afbeeldingen kunnen vergroten als ze het aan zetten. De mensen die een niet-javascript browser gebruiken, zijn vooral mensen met een visuele beperking, die webpagina's laten voorlezen of met braille tot zich laten komen (daar zijn speciale apparaten voor) - maar die mensen zullen toch al weinig met plaatjes kunnen doen. Dus ik denk dat het nadeel wel meevalt.

Als de css en het script eenmaal in de <head> zijn gezet, bestaat het ombouw-werk er uit dat je de links:

<a href="foto%27s/armbanden/barongpaars.jpg" target="_blank">

moet vervangen door:

<a href="javascript:showGroot('foto\'s/armbanden/barongpaars.jpg')">

(die extra tegendraadse slash is in de scripttaal een Escape om het accentje erna goed te kunnen interpreteren)

Is dat te overzien?
En ... ben je al nieuwsgierig genoeg na al dit gebabbel?

• Hier komt ie dan: de voorbeeld-pagina.

Hij werkt in ieder geval in Internet Explorer 6, 7 en 8, in Firefox 3 en 3.5, en in Opera en Safari. En hij werkt bij alle schermformaten en window-instellingen, dat is ook wel aangenaam (met een grote afbeelding die zó groot is, dat je moet scrollen, heb je ook geen mooi overzicht van het sieraad). De grote afbeelding wordt steeds precies beeldvullend, hoe groot of klein je scherm ook staat ingesteld.

Als het je bevalt, kan je de css en 't script uit de broncode plukken. Voor geïnteresseerden staat daar ook een gedetailleerde toelichting bij het script (die kan er gewoon in blijven staan).

En als je nog vragen hebt: komt u maar!

Met vriendelijke groet,
CSShunter

PS:
Er zitten in de code nog wat html-fouten (die heb ik er in laten staan), maar dat zal de schuld van Dreamweaver zijn; ze zijn in elk geval niet zo erg dat ze de pagina ontoonbaar maken!

 

[saskiab]

hoi,

allereerst ontzettend!!!!!! bedankt!!!! super super. en volgens mij begrijp ik het zowaar en is het zelfs eenvoudig!

ik ga het morgen direct proberen, als ik nog ergens tegen aan loop hoor u het wel.
:thumb:

groetjes saskia

 

[saskiab]

o ja nog even: wat moet ik precies doen eigenlijk? moet ik de aangepaste code in mijn templates zetten? en welke delen van de code? zie nu allemaal code en dingen en heb geen idee wat origineel van mij is en wat toegevoegd of veranderd(erg he?!)

en hoe kan het overigens dat u mijn code kan veranderen? ben er nu blij mee maar is dat erg eigenlijk? is het slim dat ooit te gaan beveiligen?

en die foutjes zijn van mij denk ik of niet? maar perfectionist als ik ben zou ik graag weten wat voor fouten en hoe erg en waar precies?

groetjes saskia

 

[csshunter]

Hoi Saskia,

o ja nog even: wat moet ik precies doen eigenlijk? moet ik de aangepaste code in mijn templates zetten? en welke delen van de code? zie nu allemaal code en dingen en heb geen idee wat origineel van mij is en wat toegevoegd of veranderd (erg he?!)

Niet zo erg, want we gaan proberen je erdoorheen te loodsen.

en hoe kan het overigens dat u mijn code kan veranderen? ben er nu blij mee maar is dat erg eigenlijk? is het slim dat ooit te gaan beveiligen?

Zeg maar jij tegen CSShunter!
Eigenlijk heb ik niet echt je code veranderd. Wat ik gedaan heb:

• Eerst je pagina gedownload als code (dat gaat met Beeld > Paginabron, en dan Opslaan als).
• Op m'n gemakje aan de code gaan sleutelen.
• En toen de pagina weer teruggezet (geüpload) op internet, maar niet op jouw site (daar kan ik niet bij, want geen wachtwoord om in te loggen), maar op die van www.developerscorner.nl/csshunter/. Daar gaat ook de link van de testpagina naar toe.

Dat kan iedereen, en is in principe niet erg. Alleen als je plagiaat gaat plegen uit stukken van een website (of de complete lay-out jat, of afbeeldingen gaat gebruiken zonder copyright-toestemming van de auteur). Wat dit betreft is internet vogelvrij. Het valt ook niet te beveiligen, want als iets op het beeldscherm van mijn pc staat, staat het dus ergens (al is het tijdelijk) op mijn pc!

• Zo heb ik trouwens (gratis) 30% van mijn kennis veroverd over websites maken en alle voetangels & klemmen erbij: broncode van pagina's openen, en kijken hoe ze het doen! - Nog eens (gratis) 30% van internet gehaald op pagina's met artikelen, websites met tutorials, forums; met behulpzame assistentie van Google. (en de overige 40%? ook gratis: zelf experimenteren!)

Als je iets origineels maakt, heb je automatisch het copyright. Dat geldt ook voor websites (vormgeving, inhoud en afbeeldingen/foto's). Eventueel kan je nog ergens op je site zetten: © 2009 Saskia.

en die foutjes zijn van mij denk ik of niet? maar perfectionist als ik ben zou ik graag weten wat voor fouten en hoe erg en waar precies?

Meer van Dreamweaver, denk ik. Je kan een html-pagina online checken met de html-validator van het w3-consortium. Voor de Armbandenpage1 geeft die dit resultaat. Als je naar beneden scrollt, zie je een keurig lijstje van de fouten, met vaak een goede uitleg erbij van hoe je het moet verbeteren. De meeste foutjes in de pagina: bij elk image moet er alt="" in de <img src="..." enz.> bij komen te staan.

Maar nu weer terug naar af. De gebruiksaanwijzing!
Eerst een vraag: kan jij in Dreamweaver makkelijk een script-bestand en een stylesheet importeren? (ik heb geen DW, en weet niet hoe dat moet)
Dan kunnen we nl. het script en de css apart zetten, en dan zijn op elke pagina (die het nodig heeft) twee verwijsregeltjes in de <head> voldoende. - Anders moet alles steeds opnieuw ingeplakt worden.

Met vriendelijke groet,
CSShunter

 

[saskiab]

hoi,

oke ehm ik weet niet precies hoor maar bedoel je dat je zeg maar in het programma zelf iets toevoegd? net als dat ik bijv. de startpagina(nieuwe blanco untitled pagina) bij illustrator kan wijzigen. zoiets? want daar heb ik dan wel ff hulp bij nodig denk ik want dat weet ik zo dus niet.
trouwens erg knap dat je dat zo allemaal hebt geleerd! en leuk dat je me wilt helpen iig.

is het trouwens dan omslachtig dat ik met tabellen en templates werk? want ik weet dat ik met dreamweaver wel standaard css styles en blanko pagina's en dat soort kan maken, maar snap niet echt precies wat ik met css moet. nu doe ik gewoon new html en vul ik de rest allemaal zelf in, maak er een template van en dat soort dingen, maar css? geen idee heb het boek van DW mx for dummies hier wel maar vind het een grote brei.
vond dit wel een makkelijkere oplossing, maar zal wel meer laadwerk vergen dan van de browser denk ik?
groetjes saskia

 

[csshunter]

Hoi Saskia,
We gaan ook weer eens verder met deze!
Met css kan het ook (en mooier/beter dan met tabellen), maar daarvoor moet je wel wat van css afweten. En dan zou het hele pagina-ontwerp van de grond af aan opnieuw opgebouwd moeten worden. Voorlopig maar even laten schieten!
Eerst maar eens de plaatjes-vergrotingsautomaat er op zetten.

Ik heb hier een testbestand gemaakt: DWtest-1.htm.
Als je daarnaartoe gaat, dan verschijnt de Armbanden-pagina. Als je op de kleine foto van Geketteld Blue enz. klikt, gebeurt er nog niets. Dat komt later!

Deze DWtest-1.htm ga je downloaden naar jouw pc:

• via menu Bestand > Oplslaan als...
• en dan neerzetten in het mapje waar je pagina's staan, bijvoorbeeld in:
  C:\mijn Saskia documenten\hobbygaragewebsite\

Gelukt? Dan zet je Dreamweaver aan, en je opent deze pagina. Vervolgens:

• de pagina bekijken in de <>Code weergave,
• regel 9 (die begint met <base href= ...) wissen.
• regel 10 (die begint met <meta name="robots" ...) ook wissen.
• en de zo gewijzigde pagina weer opslaan (met dezelfde naam).

Nu moet hij op de site komen:

• ga in het Dreamweaver-venster Bestanden (rechts onder) naar lokale bestanden.
• en blader naar onze DWtest-1.htm.
• deze selecteren en de opdracht Plaatsen geven.

Even kijken of het gelukt is:

• Internet Explorer openen,
• en surfen naar www.bouwbedrijfstegeman.nl/hobbygaragewebsite/DWtest-1.htm.

Staat ie er?

Wordt vervolgd!
CSShunter