Plaatjes overelkaar heen leggen/zetten

Status
Niet open voor verdere reacties.
V

viletung

Gebruiker
Lid geworden
21 nov 2009
Berichten
142
Hallo,

Ik zit met een klein probleempje, ik krijg het voorelkaar in FireFox om plaatjes perfect (met coordinaten).
Maar in Internet Explorer wil het natuurlijk weer niet.

Dus de vraag is: Hoe kan ik dit voor elkaar krijgen in Internet Explorer én FireFox?

Alvast bedankt :thumb:

De doeleinden van dit is projectje is legaal, wil graag meer leren van HTML en hoe te werken met plaatjes! :o

FireFox Screen:
ff.png


Internet Explorer Screen:
ie.png


Code:

HTML: 
<img STYLE="border-style:none;" src="./plattegrond.jpg" width="300" height="264" alt="Map" />

<DIV STYLE="border-style:none; position:fixed; left:101px;top:34px;">
<a href="url"><img src="./lvl1.png"></a>
</DIV>
 
Hoi viletung,
Ik heb dit draadje voor je. Met iets dergelijks als in het laatste voorbeeld zou je een heel eind moeten kunnen komen.

Helpt dat?
Met vriendelijke groet,
CSShunter
 
SUPER bedankt! Helemaal top! Werkt perfect!

Heb de code een beetje verandert (die van het kasteel), dit is nu de code:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test :: image - hover </title>

<style type="text/css">
html {
    height: 100%;
    padding-bottom: 1px;
    }
body { 
    font-size: 100.1%;
    margin: 0;
    padding: 0;
    }
img {
    border: 0;
    }
#plaatje {
    width: 300px;
    height: 264px;
    margin: 0 auto;
    background: url(map.jpg);
    }
#vleugel-1 {
    width: 17px;
    height: 12px;
    display: block;
    position: absolute;
    margin-left: 93px;
    margin-top: 27px;
    background: url(./lvl1.png);
    }
</style>
</head>

<body>

<div id="plaatje">
<map name="rx">
<area href="http://s4.travian.nl/build.php?id=1" coords="101,33,28" shape="circle" title="Houthakker Niveau 1" alt="Houthakker Niveau 1">
<area href="http://s4.travian.nl/build.php?id=2" coords="165,32,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=3" coords="224,46,28" shape="circle" title="Houthakker Niveau 0" alt="Houthakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=4" coords="46,63,28" shape="circle" title="IJzermijn Niveau 0" alt="IJzermijn Niveau 0">
<area href="http://s4.travian.nl/build.php?id=5" coords="138,74,28" shape="circle" title="Klei-afgraving Niveau 0" alt="Klei-afgraving Niveau 0">
<area href="http://s4.travian.nl/build.php?id=6" coords="203,94,28" shape="circle" title="Klei-afgraving Niveau 0" alt="Klei-afgraving Niveau 0">
<area href="http://s4.travian.nl/build.php?id=7" coords="262,86,28" shape="circle" title="IJzermijn Niveau 0" alt="IJzermijn Niveau 0">
<area href="http://s4.travian.nl/build.php?id=8" coords="31,117,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=9" coords="83,110,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=10" coords="214,142,28" shape="circle" title="IJzermijn Niveau 0" alt="IJzermijn Niveau 0">
<area href="http://s4.travian.nl/build.php?id=11" coords="269,146,28" shape="circle" title="IJzermijn Niveau 0" alt="IJzermijn Niveau 0">
<area href="http://s4.travian.nl/build.php?id=12" coords="42,171,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=13" coords="93,164,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=14" coords="160,184,28" shape="circle" title="Houthakker Niveau 0" alt="Houthakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=15" coords="239,199,28" shape="circle" title="Graanakker Niveau 0" alt="Graanakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=16" coords="87,217,28" shape="circle" title="Klei-afgraving Niveau 0" alt="Klei-afgraving Niveau 0">
<area href="http://s4.travian.nl/build.php?id=17" coords="140,231,28" shape="circle" title="Houthakker Niveau 0" alt="Houthakker Niveau 0">
<area href="http://s4.travian.nl/build.php?id=18" coords="190,232,28" shape="circle" title="Klei-afgraving Niveau 0" alt="Klei-afgraving Niveau 0">
<area href="http://s4.travian.nl/dorf2.php" coords="144,131,36" shape="circle" title="Dorpscentrum" alt="">
</map>

    <a id="vleugel-1" title="Vleugel-1" href="http://developerscorner.nl/csshunter/tests/vleugel-1.htm"></a>
    <img width="300" height="264" usemap="#rx" src="./x.gif" alt="">
</div>

</body></html>

Nogmaals super bedankt!
 
Ja, met een image-map kan het ook.
Het nadeel daarvan is, dat je er geen hover-plaatjes overheen kunt zetten, en de bezoeker bij hoveren geen directe feedback krijgt. De tooltips verschijnen met wat vertraging, en als je gewoon over het plaatje beweegt, zie je ze niet (pas als je stilstaat).

Met css-hovers kan dat allemaal wel, en dan kan je er in één moeite door ook css-tooltips aan hangen (die veel sneller werken dan de normale tooltips).
<Edit per 6 januari 2011>
  • Bij het Dorpscentrum in de image-map versie kachel je bv. bij hoveren al gauw over het Dorpscentrum heen omdat de tooltip later komt, en zie je niet dat het een klikbare link is.
  • CSS-tooltips blijven daarbij beschikbaar zolang je hover op het element staat; gewone tooltips verdwijnen na 3 tellen.
</edit>
Als je in je tekenprogramma een mooie indeling in vlakjes maakt:

travian-areas.gif

en even prutselt met de positionering van de links en de achtergrond-posities erbij, dan kan je met één transparant hover-plaatje volstaan:

travian-hover.gif

Het dorpscentrum bungelt hierbij een beetje onderaan, omdat anders een deel van de dorpscentrum-hover te zien zou zijn als je over andere nummers hovert (vooral nr. 13 overlapt, het zit nogal krap in het midden). Omdat het dorpscentrum als laatste in de html staat, ligt die bovenop, en wordt het overlappende hoekje van nr.13 en het het dorpscentrum bij de hover van het dorpscentrum getrokken, en niet bij die van nr.13.
Voor mij wint de css-methode! :)

Met vriendelijke groet,
CSShunter

PS: in je code hierboven staat nog een oude regel (nr.62) die als link naar een niet-bestaande pagina op developerscorner.nl voert. Die kan geschrapt! ;)
 
Laatst bewerkt:
Hallo,

Mijn excuses voor dit late bericht. En wow! Dat van jouw ziet er nog mooier uit, en geeft ook veel beter weer. En er zit ook nog wat leerstof voor mij bij! :) Super bedankt! :thumb:
 
Mijn excuses voor dit late bericht.
Klik om te vergroten...
Hoi-hoi, no problem. 't Is tenslotte vakantiemaand geweest. - Was alleen even bang dat je 'm misschien niet opgemerkt zou hebben (bv. uitgeschreven uit de email-notificatie na je vorige bedankje).
Maar alles dus op z'n pootjes terecht gekomen. Van dit soort dingen wordt ik altijd heel blij: als 't na enig prutswerk gelukt is, kan ik wel uuuuren zitten hoeveren om te zien dat het nog steeds werkt. :D
Want css is toch wonderschoon, niet? Dat het allemaal maar zo kan! :)
En ook helemaal geen javascript of andere toestanden nodig.

Mocht je nog wat achtergrond-info over achtergrond-positionering willen hebben, dan is er dit artikeltje over de principes ervan:
Daarna is het alleen geduldig schuiven (en soms tijdelijk met randjes of felle kleurtjes werken om te zien waar je zit).

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan