[HTML] stipjes in een kaart als link

[NitSuA]

ik ben bezig met een site waar een plattegrond op staat.
Op deze plattegrond moeten stipjes komen waar men op kan klikken en zo naar de betreffende locatie kan gaan.

Ik ben al bezig geweest met image maps (<area shape="rect" coords="30,30,59,59" href="" /> ) maar het probleem is dat de plek waar je op kan klikken niet zichtbaar is. Het moeten dus gekleurde stipjes worden..

heeft imand een slim idee?

[CodeCaster]

Niet getest, maar een schopje in de goede richting:

Cascading Stylesheet:

area {
border: 1px solid #0000ff;
}

[Nakebod]

Ik heb een idee ja
En dat is over je huidige background/plattegrond een extra overlay image leggen, transparant, met stippen op de juiste plaats

Dan krijg je dit idee: http://sa-mp.nl/map.php
1 achtergrond + overlay = zichtbaar waar je kan klikken.

Het idee van CodeCaster zou ook nog wel eens kunnen gaan werken denk ik.

[NitSuA]

nee, helaas.. blijft doorzichtig.. misschien allemaal kleine absoluut gepositioneerde divjes? (lijkt me zo omslachtig..)

[NitSuA]

Nakebod, dat is precies wat ik bedoel.
ik begrijp alleen het idee van overlay niet helemaal. waar zitten dan precies de links?

[Alex)]

HTML:

<style type="text/css">
img#overlay
{
  background: url(image.png) no-repeat 50% 50%;
}
</style>

<img src="transparant.gif" id="overlay" width="breedte origineel" height="hoogte origineel" usemap="#map">


... imagemap hier

En transparant.gif is dan een transparant gif van 1x1 pixel, die je uitrekt tot de grootte van je eigen afbeelding..

[NitSuA]

ok, bovenstaande is duidelijk, maar waar staan dan de kleuren van de stipjes? of staan die stipjes al in de originele image.png en staat de image map er precies overheen zodat de locaties en de stipjes overeen komen ?

[Verwijderd]

Niet praktischer om gewoon een lijst met links te maken en deze als stipjes weer te geven en absoluut te positioneren over de kaart d.m.v. CSS?

[Nakebod]

Alex) schreef op maandag 05 maart 2007 @ 17:41:

HTML:

<style type="text/css">
img#overlay
{
  background: url(image.png) no-repeat 50% 50%;
}
</style>

<img src="transparant.gif" id="overlay" width="breedte origineel" height="hoogte origineel" usemap="#map">


... imagemap hier

En transparant.gif is dan een transparant gif van 1x1 pixel, die je uitrekt tot de grootte van je eigen afbeelding..

Nee dat is niet zoals ik het @ die map heb.
Die map is opgebouwd in de basis map: http://sa-mp.nl/map/images/gta_sa_map_final_one.jpg
overlay: http://sa-mp.nl/map/images/properties.gif
Overlay image heeft zelfde formaat als de basis map.

Zoals je ziet, is de properties.gif een transparante gif met op de juiste plaats een icoontje.
Dit wordt dan weer via een JS samengevoegd zeg maar tot 1 afbeelding. Heb het niet zelf gemaakt dus de precieze werking weet ik niet, maar ik weet wel dat het voor mijn map een goede methode was.

En de icoontjes op de map daar moet je dan wel gewoon de coördinaten van weten/zoeken, en in een map/area zetten.
Bekijk de source maar eens en dan snap je denk ik wel hoe die map van mij in elkaar steekt.

[Alex)]

Je zou mijn code zo kunnen uitbreiden:

Cascading Stylesheet:

area
{
   display: block;
   width: breedte stipje px;
   height: breedte stipje px;
   background: url(stipje.gif) no-repeat 50% 50%;
}

Maar dat hangt er verder vanaf hoe je het zelf wilt implementeren..

[NitSuA]

@Nakebod, je site werkt precies zoals ik het hebben wel, alleen is er op jouw manier geen mogelijkheid (of heel omslachtig) om via webinterface stipjes (locaties) toe te voegen.

@ Alex) Jou manier zou voor mij ideaal zijn, echter ik heb hem exact overgenomen zoals je voorstelt, de stipjes blijven transparant.. ook als er gebruikt wordt gemaakt van area block met een background image..

[NitSuA]

zoals CraZaay al aangaf heb ik nu een oplossing.

gewoon divjes positioneren met CSS:

code:

<div style="position:absolute;left:50px;top:50px;"><a href="image.php"><img src="stipje.gif"></a></div>

werkt prima!
ik denk dat ik het maar zo doe, of zijn er bezwaren voor deze manier? anders hartelijk bedankt allemaal!

[Nakebod]

NitSuA schreef op maandag 05 maart 2007 @ 19:22:
@Nakebod, je site werkt precies zoals ik het hebben wel, alleen is er op jouw manier geen mogelijkheid (of heel omslachtig) om via webinterface stipjes (locaties) toe te voegen.

@ Alex) Jou manier zou voor mij ideaal zijn, echter ik heb hem exact overgenomen zoals je voorstelt, de stipjes blijven transparant.. ook als er gebruikt wordt gemaakt van area block met een background image..

Die is er wel, mits je iets met PHP icm GD kan schrijven. Hoeft an sich niet zo heel omslachtig te zijn.
Dan kan je webbased een locatie toevoegen, en via GD een nieuwe gif maken.
Of dat makkelijk te doen is, ligt aan je PHP ervaring.

[Verwijderd]

NitSuA schreef op maandag 05 maart 2007 @ 19:36:
zoals CraZaay al aangaf heb ik nu een oplossing.

gewoon divjes positioneren met CSS:

code:

<div style="position:absolute;left:50px;top:50px;"><a href="image.php"><img src="stipje.gif"></a></div>

werkt prima!
ik denk dat ik het maar zo doe, of zijn er bezwaren voor deze manier? anders hartelijk bedankt allemaal!

Persoonlijk zou ik het netter vinden als je al die overbodige div's weg zou laten en gewoon de <a> zou stylen. En dan het liefste dat plaatje eruit gooien en in de plaats daarvan tekst gebruiken. Met in de CSS "width: #px; height: #px; display: block; background: red; text-indent: -9999px" zie je dan alsnog alleen een (in dit geval) rood blokje zonder tekst. Maar zoekmachines, blinden, etc. lezen dan wel gewoon de tekst. Als je al die links dan ook nog even in een unordered list zet is het helemaal af