Linken vanaf een plaatje van Google Earth

[GeronimoD]

Beste forumlezers,

Op mijn website heb ik verschillende screenshots van Google Earth als plaatje geplaatst. Ik wil nu graag een aantal 'bullets' op betreffende plaatje aanbrengen, die oplichten als je er overheen gaat. Als je de 'bullets' vervolgens aanklikt, dan moeten ze een link hebben met foto's die met die betreffende plek(ken) te maken hebben.
Op Google Earth zelf gebruiken ze de afbeelding van een fotocameraatje als bullet en na een klik kom je op een foto van bijvoorbeeld een stad. Nu vind ik een eenvoudige bullet ook al goed, maar dat zal niet zozeer het punt zijn.

Mijn punt is dat ik als beginnend websitebouwer (dreamweaver 8) niet weet hoe ik dat kan realiseren. Kortom het gaat mij erom hoe plaats ik een bullet op een willekeurige plek op een plaatje van Google Earth.

Geronimo

 

[csshunter]

Hoi Geronimo,
De manier om dit gedaan te krijgen heet "image map(ping)". Waarschijnlijk zit er in Dreamweaver een functie waarmee je makkelijk op een plaatje een aanklikbaar gebied kan tekenen (ik heb zelf geen DW). Ik zou eens gaan kijken in het Help-menu van DW, of ze er daar iets over zeggen.
Je zou kunnen beginnen om met een tekenprogramma in het Google-plaatje kleine fototoestelletjes te monteren. Die geven dan de gebiedjes aan die je in DW met een randje moet tekenen om ze aanklikbaar te maken. Om ze te laten oplichten is wat aanvullende CSS nodig, maar misschien kan Dreamweaver dat ook op een of andere manier automatisch voor je regelen.
Wat theoretische achtergrondinfo staat in elk geval in de Handleiding HTML.

Succes!
CSS-Hunter

 

[GeronimoD]

Hallo csshunter,

Bedankt voor je reactie. Heb jouw mogelijkheid via imagemapping nog niet opgezocht. Maar via ander kanaal heb ik een stukje kant en klare html-code gekregen. En het werkt!

deel 1
.fotoFrame
{
position:relative;
}
body #content .entry a.pointer,
body #content .entry a.pointer {
border-bottom:0;
}
a.pointer
{
position:absolute;
/* voor de grootte van de afbeelding/pointer */
width:35px;
height:35px;
/* voor afbeeldingslocatie */
background:transparent url(img/kaarten/pointer_32x32.png) no-repeat left top;
}
a.pointer.pointer-klein
{
width:16px;
height:16px;
background-image:url(img/kaarten/pointer_16x16.png);
}


deel 2
<div class="fotoFrame">
<div class="entry">
<img src="img/kaarten/kaart-woonsituatie-dirk />
<a class="pointer pointer-klein" style="left:20px;top:50px;" href="http://www.google.com"></a>
<a class="pointer pointer-groot" style="left:290px;top:229px;" href="http://www.google.com" title="hallo"></a> </div>

 

[csshunter]

vele wegen leiden naar Rome

Inderdaad, zo kan het ook.
Als ie het zowel in Firefox als Internet Explorer 6/7/8 goed doet, zal het ook wel in de andere browsers werken. Eventueel kan je browsershots.org het nog even laten checken.

Succes verder,
CSS-hunter