Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 07:58   
geplaatst door: mettes10
Hoi,
ik gebruik sinds kort dreamweaver en heb nu een aantal 'hotspots' gemaakt in een afbeelding. Ik zou graag bij enkele van die hotspots een shadowbox laten verschijnen waar een vimeo-filmpje in afspeelt (en later ook hotspots met foto-gallery's of losse foto's).
Hoe krijg ik dit voor elkaar? Ik heb echt heel weinig verstand van dreamweaver en/of html, dus hopelijk is er een makkelijke oplossing of kant-en-klare codes die ik in de html kan plakken... Alvast bedankt voor de hulp.

Gr. Ingo

Oja, misschien makkelijk: Het gaat om deze pagina: http://www.ingomettes.nl/awards.html (Als het goed is kan je de paginabron bekijken)
Bij de hotspot Loeki moet dit filmpje in een shadowbox verschijnen:


(Bewerkt door mettes10 om 8:01, 9-01-2013)

MacBook Pro 15,4" anti-glare, 2,2 Ghz Quad i7 8Gig intern - MacBook Pro 15,4" - 2,4 Ghz - ibook G4 14" - 1 Ghz - iPod 3G 60 Gb - ipod 3G 20 Gb - iPod nano 4Gb -  iPhone 1G - iPhone 3G white - iPhone 4 - iPhone 5 - iPhone 7 - iPhone 8 - iPhone Xs - OSX 10.13.6
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 08:55    reactie #1
geplaatst door: DomP
http://fancybox.net zou de truc moeten doen
Blow your mind, smoke gunpowder
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 12:06    reactie #2
geplaatst door: mettes10
Dank. Is zo te zien net zoiets als http://www.shadowbox-js.com
Helaas kom ik daarmee (met shadowbox) ook niet echt verder...
Er is een youtube tutorial waarin ze laten zien hoe en wat.
Copy-paste, maar dat werkt bij de code uit dreamweaver niet, vandaar hier m'n vraag... ;-)
MacBook Pro 15,4" anti-glare, 2,2 Ghz Quad i7 8Gig intern - MacBook Pro 15,4" - 2,4 Ghz - ibook G4 14" - 1 Ghz - iPod 3G 60 Gb - ipod 3G 20 Gb - iPod nano 4Gb -  iPhone 1G - iPhone 3G white - iPhone 4 - iPhone 5 - iPhone 7 - iPhone 8 - iPhone Xs - OSX 10.13.6
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 18:24    reactie #3
geplaatst door: DomP
Dit soort dingen kun je altijd beter invoegen met een simpele teksteditor, osx heeft een mooie ingebouwd.
Het voordeel t.o.v. dreamweaver is ook nog eens dat je de html die je bewerkt gaat begrijpen :-)

Succes

Blow your mind, smoke gunpowder
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 18:35    reactie #4
geplaatst door: Spooter
Je kan gewoon in de html code werken mbv Dreamweaver (code view ipv design view)
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 18:58    reactie #5
geplaatst door: mettes10
Yep. Ik ben in de 'code view' aan't klooien. Maar kan geen shadowbox aan een hotspot koppelen...
Ziet er nu zo uit:

<area shape="rect" coords="685,281,818,465" href="http://player.vimeo.com/video/32848771" frameborder="0" rel="shadowbox" target="_top" alt="Loeki" />

maar zo werkt het niet iig.
Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

en:
"stylesheet" type="text/css" href="shadowbox.css"
script type="text/javascript" src="shadowbox.js"
blablabla

staan ook al vermeld...

(Bewerkt door mettes10 om 18:58, 9-01-2013)

(Bewerkt door mettes10 om 18:59, 9-01-2013)

(Bewerkt door mettes10 om 19:00, 9-01-2013)

MacBook Pro 15,4" anti-glare, 2,2 Ghz Quad i7 8Gig intern - MacBook Pro 15,4" - 2,4 Ghz - ibook G4 14" - 1 Ghz - iPod 3G 60 Gb - ipod 3G 20 Gb - iPod nano 4Gb -  iPhone 1G - iPhone 3G white - iPhone 4 - iPhone 5 - iPhone 7 - iPhone 8 - iPhone Xs - OSX 10.13.6
Shadowbox bij hotspot in Dreamweaver
9 januari 2013 - 20:21    reactie #6
geplaatst door: Shmoo

geblokkeerd

Ik zou gewoon dat Dreamweaver afsluiten en nooit meer openen want het helpt je alleen maar verder van huis. Dreamweaver wordt altijd door grafisch professionals standaard genomen om twee redenen.
1) Het is van Adobe dus zal het wel dezelfde kwaliteit hebben als de grafische producten - Wrong!
2) De Design view lijkt op een betere uitgave van iWeb dus kan ik daar ook websites mee bouwen - Wrong again.

De design view in Dreamweaver is gemaakt voor developers als handigheidje om direct te zien wat en waar ze iets aan het aanpassen zijn en niet om websites mee op te bouwen. Doe je dat wel dan krijg je zwaar dramatische websites die totaal niet stroken met hoe het zou moeten.

Hotspots, zoals Dreamweaver dat noemt heet eigenlijk Image Maps en dat wordt al jaren niet meer gebruikt zeker niet om dit soort navigaties mee te maken. Enkel waar je het nog voor zou kunnen gebruiken en waar het ook in de eerste plaats voor ontworpen is zijn landkaarten en om bijv. linkjes voor verschillende provincies aan te wijzen zonder dat de helft van limburg en Brabant in 1 linkje hebt staan.
http://www.w3schools.com/tags/tag_map.asp


Een navigatie die jij wilt maken zou je gewoon via inline via CSS uit te voeren zie het groene voorbeeld bovenaan alleen van de menu-items maak jij dan plaatjes ipv teksten.
http://www.w3schools.com/css/css_navbar.asp

De image tag werkt op deze manier en kun je gewoon tussen een link tag ( <.a. href=""> hier <./a.> ) gebruiken zodat het plaatje een link wordt ipv de tekst.
http://www.w3schools.com/html/html_images.asp
http://www.w3schools.com/html/html_links.asp

(Bewerkt door Shmoo om 20:25, 9-01-2013)

Shadowbox bij hotspot in Dreamweaver
10 januari 2013 - 00:36    reactie #7
geplaatst door: mettes10
Hé Shmoo, misschien is dat wel een betere oplossing... Ik ga het morgen even uitzoeken. Dank :-)
MacBook Pro 15,4" anti-glare, 2,2 Ghz Quad i7 8Gig intern - MacBook Pro 15,4" - 2,4 Ghz - ibook G4 14" - 1 Ghz - iPod 3G 60 Gb - ipod 3G 20 Gb - iPod nano 4Gb -  iPhone 1G - iPhone 3G white - iPhone 4 - iPhone 5 - iPhone 7 - iPhone 8 - iPhone Xs - OSX 10.13.6
Shadowbox bij hotspot in Dreamweaver
18 februari 2013 - 14:53    reactie #8
geplaatst door: Peter Villevoye
Dreamweaver is misschien een beetje een overdadig programma aan het worden, maar veel mensen hebben niet door hoeveel makkelijke dingen er toch in zitten ! (Soms wel wat verstopt...)

Verdiep je eens in de "Web-widgets" die je gratis bij/vanuit Dreamweaver krijgt. Klik op het tandwieltje in de balk linksboven en kies de "Widget Browser". Afhankelijk van je Dreamweaver-versie moet je misschien eerst de Widget Browser met Extensiebeheer installeren. Jaja, niet simpel allemaal, maar het wordt wel handiger als je even doorbijt.

In die Widget Browser vind je ruim 60 veelgevraagde "widgets", van light-boxes tot datum-kiezers. Je kiest een widget, configureet deze qua stijl en andere zaken, en sleept deze dan (gek handje) naar je pagina in Dreamweaver. Moet eerlijk bekennen dat het aan de praat krijgen van die Widget Browser en de interface van het instellen van de widgets geen schoonheidsprijs verdient, maar je hoeft tenminste geen rare scripts te copy-pasten; geen gedoe, klaar.

Studea — Advies - Training - Begeleiding in DTP, web- en app-design.  En... een PixelFreak !