Virtuele kaart ook met afbeelding + mouseover?

Hallo,

Ik heb nog een vraag. Ik wil namelijk graag een Virtuele kaar maken en heb daarvoor de tutorial gelezen (Nog niet uitgeprobeert), maar ben benieuwd of het ook mogelijk is om een losse afbeelding op de kaart te zetten die 'uitklapt' als je je muis er overheen haalt.

Uitgebreide uitleg
Als ik het goed begrijp uit de tutorial maak je een kaart waar alle namen enz. al opstaan (Een afbeelding van 1 geheel dus), waar je aangeeft waar je kan klikken d.m.v. de coords in te vullen. Wat ik eigenlijk wil is dat je een kaart hebt zonder namen e.d. (Alleen landschap dus) en dat je de 'buttons' (met de naam van het gebied) er los op zet en zodra je er met je muis overheen gaat er een vakje met tekst 'uitklapt' (Gwn normale mouse over, maar dan word de afbeelding die je te zien krijgt zodra je muis erop staat iets langer zodat er ruimte is voor de tekst)

Is dit mogelijk? Zoja, Hoe doe ik dit?
Hopelijk is mijn vraag een beetje duidelijk en anders hoor ik het wel.

Gr. Mystic

PS: Als ik naar de CSS ga is die leeg. Ik klik vervolgens op 'Laat de CSS van je forum zien' (o.i.d.), Komt er zo`n scherpje. Die tekst (CSS) plak ik dan in het grote vak...Klik ik op verzenden is die tekst te lang O.o Nu kan ik de CSS niet editen ;l (Voor zover ik weet dan) Is hier ook een oplossing voor? :S

De tutorial voor de kaart is inmiddels al sterk verouderd. Er is een betere en een makkelijkere methode om kaarten te maken.
Ik heb ooit voor mijn oude forum kaarten gemaakt en ben nu bezig met het maken van een nieuwe kaart voor een nieuw forum. Zowel de oude kaart als de nieuwe kaart heeft de mogelijkheid om afbeeldingen of tekst uit te klappen of eigenlijk verschijnt er een klein venstertje waar de tekst in staat, wanneer je met de muis over de tekst, plaatje of button gaat.
Binnen dat vakje waar die uitgeklapte tekst staat kun je zelf ook weer klikken op een link
Maar het is ook wel mogelijk om tekst echt uit te laten klappen, alleen moet ik even opzoek naar de code daarvoor. Die heb ik wel ergens gezien.
Dus ja, dit is mogelijk.

Mijn vraag is echter wel of je voor die buttons (waar je met de muis overheen moet) daadwerkelijk tekst gaat gebruiken of echte plaatjes.

Voor de P.S vraag heb ik zo geen antwoord. Heel raar dat hij dit doet. Gelukkig heb je voor deze methode de CSS niet nodig. Maar kun je misschien een printscreen van dit probleem bijvoegen.

Naar aanleiding van je bericht moet mijn krankzinnige idee dus mogelijk zijn. ;P

Wat er nu een beetje in me hoofd zit;

De kaart bestaat uit verschillende lagen.
- Een achtergrond dat elk plaatje kan zijn en totaal niet uitmaakt of het nu een kaart is of een boom.
Gewoon een achtergrondfoto zeg maar.
- Een gebied met buttons en 'uitklapbare delen/afbeeldingen'

Wat mijn bedoeling dus is..Als je met je muis op zo`n button gaat staat word de button als het ware 'ingedrukt', Ga je van de button af word hij weer normaal. Als je op de button klikt blijft ie 'ingedrukt' tot dat je weer opnieuw erop klikt en hij weer normaal word zodra je met je muis eraf gaat. Als je klikt op de button komt er onder de button een schermpje (Ook een plaatje/afbeelding) die aan de button lijkt vast te zitten. (Ik weet niet of dat 'uitklapgedeelte' een losse afbeelding moet zijn of 1 geheel moet zijn met de button ;S) In dat deel wat 'uitgeklapt is' komt dan tekst. (Geen idee of je dat in de code moet invoeren of gewoon op de afbeelding moet zetten) en een button met mouseover-effect en de tekst 'Ga' Als je dan op die button klikt ga je pas naar het gebied.

Kortom: Achtergrond Foto, Button met Mouseover effect. Blijft ingedrukt als je aangeklikt hebt > Er komt ook een uitklapgedeelte met informatie over gebied en knop (Met mouseovereffect) met 'Ga' > Als je de button weer aanklikt verdwijt t uitklapgedeelte en word de button weer normaal (Dikgedrukt = Als je met je muis van de button afgaat)

Ik zal ook nog even een soort opzetje maken van hoe het er ongeveer uit komt te zien volgens die idee voor een duidelijker beeld. Doe ik wel in Edit. Lang verhaal, maar hopelijk wel duidelijker zo ;P

@PS Vraag

Hallo,

Wat jij graag wel is mogelijk. Ik moet nog wel even de code ervan opzoeken, maar een goed idee is het wel. (misschien ook nog wel van toepassing voor mijn eigen forum als je het niet erg vind dat ik je idee steel )
Ik ga zelf opzoek naar de geschikte codes ervoor en probeer er wat van te maken.

Ik wacht op je opzetje zodat ik weet hoe het eruit moet komen te zien, maar het is dus wel mogelijk

De Opzet:


Duidelijker dan dat kan ik het niet maken.

En trouwens, het is echt geen probleem als je dit idee gebruikt hoor ;P Was er niet mee gekomen zonder je tutorial. ;D

Oké. Ik denk dat het het beste is om dit stap voor stap te doen, aangezien ik alle codes nog moet opzoeken.
Zou jij misschien (na het zien van deze indrukwekkende animatie) twee buttons willen maken. Eén gewone button en één button die verschijnt wanneer je met de muis over de button heen gaat?

Dan zoek ik ondertussen de codes ervoor op
Ik maak een testpagina aan op deze website.

Bedankt!

* ik heb de code voor de mouseover en het uitklappende gedeelte al gevonden. Nu moet ik alleen nog uitvinden hoe de knop ingedrukt blijft als je erop klikt
Zou jij misschien ook nog een afbeelding willen maken voor de achtergrond van het uitklappende deel, zoals ook te zien was in de animatie?

Hier een aantal afbeelding die ik gebruikt heb bij de animatie.

<sub>Button


Button Hover[/b]


Het probleem bij deze buttons is dat elk gebied natuurlijk andere naam heeft. Er komen dus meerdere buttons met de namen van de gebieden. Nu zou ik die wel alvast kunnen maken, maar ik weet de namen voor de gebieden ook niet. Het enige wat ik weet is dat de gebieden op een eiland zijn ;P

[sub]Uitklap Kort</sub>


Dit is een uitklapding voor als er alleen Ga button is en geen info. (Als dit mogelijk is, Ik kom altijd weer met toevoegingen ;S)

<sub>Uitklap Groot + Info


Ga Button


Ga button Hover</sub>


Hopelijk zijn dit de afbeeldingen die je zocht? Anders hoor ik het wel ;P
In ieder geval alvast bedankt voor alle tijd en moeite

PS: Het moet nog wel mogelijk zijn om de buttons te plaatsen waar ik wil he ;P (Met coords ofso..), maar ik denk dat je dat wel wist ;S
Kan het trouwens een probleem worden dat 1 van de buttons aan de rand van de kaart zit en het 'uitklapding' dan maar voor een deel zichtbaar is of blijft het hele uitklapding zichtbaar en gaat het alleen uit het kader? :S

Wel ik heb een deel van de code af. Het lukt me helaas niet om voor elkaar te krijgen dat de knop blijft staan als je erop klikt.

Link: https://ondersteun.actieforum.com/h4-testbutton

Ziet er goed uit!

Is het ook mogelijk om die button in het midden te zetten ten opzichte van het uitklap gedeelte? :S (T liefst op de rand ervan en zonder kadertje erom heen)

Excuus dat ik t altijd zo precies wil hebben ;S Ik wil altijd meer, Slechte eigenschap

Het kadertje wil ik er ook graag om weg. Ben ik nu mee bezig, maar wil dus nog niet echt lukken
Maar denk wel dat ik heb in het midden kan krijgen.

Dan wens ik je veel suc6 en zou geweldig zijn als het in het midden kan!
Ik hoor vanzelf wel wanneer het gelukt is

Hallo,

Wegens grote drukte met school kan ik de plaatjes niet afmaken.
Als alles goed gaat kan ik er morgen wel weer aan werken.
Excuses voor het ongemak.

Hij is klaar
Linkje: https://ondersteun.actieforum.com/h4-testbutton

Al weet ik niet zeker of hij ook daadwerkelijk in een kaart gaat werken
Maargoed, het is een uitprobeersel.

p.s heb je mijn PM gelezen?

Hartelijk bedankt voor de hulp ;P Nu kijken of ik de code in de kaart kan krijgen..Nu ik t toch over de code heb..Zou je die nog even kunnen posten?

Hier is de code

Code:

<div>
<div id="positieknop"><a href="#" class="show_hide">
<img src="http://www.imgdumper.nl/uploads6/51508a297c8f1/51508a297bd36-BTL.png"
onmouseover="this.src='http://www.imgdumper.nl/uploads6/51508a7a17f81/51508a7a173c5-BTL2.png'"
onmouseout="this.src='http://www.imgdumper.nl/uploads6/51508a297c8f1/51508a297bd36-BTL.png'">
</a></div>
<div class="slidingDiv">
<div id="d1">
<div id="tekstpositie"><center>hier komt dus de tekst. En hieronder een voorbeeld van een knopje <br>
<img src="http://www.imgdumper.nl/uploads6/51508c1a5647c/51508c1a55cb1-Ga.png"
onmouseover="this.src='http://www.imgdumper.nl/uploads6/51508c2f46277/51508c2f45aba-Ga_hover.png'"
onmouseout="this.src='http://www.imgdumper.nl/uploads6/51508c1a5647c/51508c1a55cb1-Ga.png'">

</center></div></div></div>
</div>

<div>
<div id="positieknop"><a href="#" class="show_hide2">
<img src="http://www.imgdumper.nl/uploads6/51508a297c8f1/51508a297bd36-BTL.png"
onmouseover="this.src='http://www.imgdumper.nl/uploads6/51508a7a17f81/51508a7a173c5-BTL2.png'"
onmouseout="this.src='http://www.imgdumper.nl/uploads6/51508a297c8f1/51508a297bd36-BTL.png'">
</a></div>
<div class="slidingDiv2">
<div id="d1">
<div id="tekstpositie"><center>hier komt dus de tekst. En hieronder een voorbeeld van een knopje <br>
<img src="http://www.imgdumper.nl/uploads6/51508c1a5647c/51508c1a55cb1-Ga.png"
onmouseover="this.src='http://www.imgdumper.nl/uploads6/51508c2f46277/51508c2f45aba-Ga_hover.png'"
onmouseout="this.src='http://www.imgdumper.nl/uploads6/51508c1a5647c/51508c1a55cb1-Ga.png'">

</center></div></div></div>
</div>






<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function(){
 
        $(".slidingDiv").hide();
        $(".show_hide").show();
 
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
 
});

$(document).ready(function(){
 
        $(".slidingDiv2").hide();
        $(".show_hide2").show();
 
    $('.show_hide2').click(function(){
    $(".slidingDiv2").slideToggle();
    });
 
});


 
</script>

</script>

<style>
.slidingDiv {
    height:320px;
    background-image:url('http://www.imgdumper.nl/uploads6/51508b3fec66b/51508b3fe9b76-zoo_external_info_long_%281%29.png');
background-repeat:no-repeat;
    padding:20px;
    margin-top:10px;
    border:none;
}
 
.show_hide {
    display: none;
  border: none;
}

.slidingDiv2 {
    height:320px;
    background-image:url('http://www.imgdumper.nl/uploads6/51508b3fec66b/51508b3fe9b76-zoo_external_info_long_%281%29.png');
background-repeat:no-repeat;
    padding:20px;
    margin-top:10px;
    border:none;
}
 
.show_hide2 {
    display: none;
  border: none;
}

#picture {
  display: block;
  width: 230px;
  height: 60px;
  background-image: url(http://www.imgdumper.nl/uploads6/51508a297c8f1/51508a297bd36-BTL.png);
background-repeat:no-repeat;
  border: 0px;
  text-decoration: none;
}
#picture:hover {
  background-image: url(http://www.imgdumper.nl/uploads6/51508a7a17f81/51508a7a173c5-BTL2.png);
  border: none;
}

#d1 { width: 300px;
      height: 150px;
      position: relative;
top: 40px;
left: 20px;
  border: none;
}

#tekstpositie { width: 300px;
      height: 150px;
      position: relative;
top: 10px;
left: 150px;
  border: none;
}

#positieknop {
      position: relative;
top: 0px;
left: 250px;
  border: none;
}
</style>