MouseOver vraag - Softwareontwikkeling

donderdag 23 september 2004 02:13

Acties:

Verwijderd

Topicstarter

Beste allemaal,

Ik probeer d.m.v. een MouseOver te bereiken dat er een tekst in een apart tekstvlak, layer, cel o.i.d. verschijnt.

Ik heb een plaatje van Nederland. Ik heb hem ingedeeld in provincies met zgn. 'hotspots'. Nu wil ik bij MouseOver dus de naam van de betreffende provincie naast het plaatje in beeld krijgen.

Ik heb met Gooooogle al het hele internet afgespeurd, maar helaas zonder resultaat. Er wordt alleen een boel geluld over veranderende plaatjes en statusbalken etc.

Hoe los ik dit op? Bedankt!

donderdag 23 september 2004 02:25

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Heb effe een snel voorbeeldje in elkaar geflanst met wat linkjes met mouseover-textjes, maar het idee is hetzelfde....

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script language="JavaScript" type="text/javascript">
        function showText(strText) {
            var oDiv = document.getElementById('dvText');
            oDiv.innerHTML=strText;
        }
    </script>
</head>

<body>
    <a href="#" onmouseover="showText('Test 1 2 3');" onmouseout="showText('');">Mouseover me!</a><br>
    <a href="#" onmouseover="showText('Hoi hoi');" onmouseout="showText('');">Mouseover me!</a><br>
    <a href="#" onmouseover="showText('Tweakers roeleert!');" onmouseout="showText('');">Mouseover me!</a>
    <div id="dvText">Blah</div>
</body>
</html>

Als je een imagemap gebruikt, zet je de onmouseover's en onmouseout's dus op je <area> tags en de div kun je natuurlijk ook vervangen door een span, td of whatever (als 'ie maar een ID heeft). En tot slot gooi je die div dus met een css-je op de juiste plek.

Voila

[ Voor 88% gewijzigd door RobIII op 23-09-2004 02:30 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 23 september 2004 02:53

Acties:

Verwijderd

Topicstarter

Bedankt man!!
Het werkt perfect!

donderdag 23 september 2004 12:27

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

Hoi mensen,

Ik was net ook naar zoiets op zoek en heb nu bovenstaand scriptje gebruikt, inderdaad icm een image map. Wat ik maak is een webpagina over anatomie bij insecten (ieder z'n hobby ja):

http://www.student.io.tudelft.nl/io9335601/anatomy.html

Het plaatje moet later nog worden vervangen door iets beters maar het gaat om het idee hier. De bedoeling is dat je, als je met je muis over bijvoorbeeld een vleugel gaat, dat je dan van dat deel van het insect een uitleg krijgt in de rechter cel van de tabel. Als je op een lichaamsdeel klikt, ga je naar een bijbehorende pagina (bestaat nog niet, dus de links zijn nu nog dood) waar verder wordt ingezoomd op dat deel van het beest, met dezelfde opzet.

Nu zou ik het leuk vinden als ik in de rechter cel behalve tekst ook een plaatje kwijt kon, afhankelijk van het lichaamsdeel waar overheen gemouseoverd wordt. Is dat mogelijk? Of is het zelfs mogelijk een eenvoudige html-pagina in de cel af te beelden (tekst + plaatje + opmaak)?

Ik ben een absolute javascript-noob, dus svp niet flamen als ik een domme vraag stel. Ja, ik heb een boel zoekwerk verricht, zowel op gathering.tweakers.net als met google. Daarom vraag ik dit ook hier. Bij voorbaat dank als je me kunt helpen!

Verder besef ik ook dat dit soort werk ongetwijfeld handiger en mooier in flash kan worden gemaakt maar gebruik van flash is niet wenselijk hier (trouwens: php of sql ofzo ook niet, wil me beperken tot javascript en html als dat kan).

SuBBaSS: "SnoeiKoei, de topic-Freek"

donderdag 23 september 2004 12:29

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

vervang:

code:

1	showText('Test 1 2 3');

eens door:

code:

1	showText('Test <b>1 2 3</b>');

Je kunt dus gewoon HTML in de parameter gooien, en dus ook plaatjes laden:

code:

1	showText('Test <b>1 2 3</b><br>[img]images\/mijnplaatje.jpg[/img]');

Je zou zelfs met een iframe een complete pagina kunnen laden, maar je mag zelf uitvogelen hoe je dat dan doet.

[ Voor 97% gewijzigd door RobIII op 23-09-2004 12:34 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 23 september 2004 12:31

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

$_/-\o_$ Thnx alot! $_/-\o_$

SuBBaSS: "SnoeiKoei, de topic-Freek"