webForumDet fria alternativet

Ruta med text vid onMouseOver

3 svar · 339 visningar · startad av LOOlau

LOOlauMedlem sedan jan. 200499 inlägg
#1

Hej..

Har en bild med maparea i, som vid onMoseOver byter bild till en annan... Nu vill jag att det skall dyka upp en ruta som det står lite text i, ex en div kanske..

koden ser ut såhär:


// Php funktion som skriver ut javascript funktionsanropet på länkarna
<?
function bpJavaFunction($img)
{
	$returnstr = "onMouseOut=\"javascript:{changePic('img/map/map.gif');return false;}\" onMouseOver=\"javascript:{changePic('$img');return false; test('$img');return false;}\" ";
	return($returnstr);
}
?>
<script>
<!--
function changePic(myVar)
{
	document.forms['theform'].mapImg.src=myVar; 
}
-->
</script>
<map name='map0'>

<area shape='poly' title='' alt='Island' ".bpJavaFunction("img/map/map-ice.gif")." href='#' coords='73,111,82'>
<area shape='poly' title='' alt='Norge' ".bpJavaFunction("img/map/map-nor.gif")." href='#' alt='sverige' coords='135,292,56'>

</map>
<center>
<form method='POST' name='theform'>";
<img ID='mapImg' border=0 height='500' width='500' src='img/map/map.gif' UseMap='#map0'>
</form>";
</center>

Mitt javascript kunnande är minimalt. Så var gärna övertydliga..

tacksam för hjälp..

Peter SMedlem sedan dec. 20025 483 inlägg
#2

Hejsan!

Med hjälp av detta skript, bör du kunna göra enligt:

<script type="text/javascript" src="wz_tooltip.js"></script>

<?
function bpJavaFunction($img)
{
    $returnstr = "onMouseOut=\"changePic('img/map/map.gif');return false;\" onMouseOver=\"changePic('$img');return escape('Lite text...')\" ";
    return($returnstr);
}
?>
LOOlauMedlem sedan jan. 200499 inlägg
#3

Kanske inte var allt för tydlig vad ja ville i min fråga.. =)
Vill inte ha en mouseover som får upp en ruta där jag för musen. Utan vill att en informations ruta uppdateras med rätt information.

exempelvis när ja för pekaren över sverige skall det stå "Sverige språk: svenska osv. men när jag för muspekaren över island skall denna text ändras till Islands information...

Såhär ser min kod för "informations rutan" ut nu.

Kod:

<div style='border:1px solid white; text-align:left;'>

	<div style='position:absolute; top:250px; background-color:white; border:1px solid black; height:130px; width:80px; margin-left:-20px;'>
	<p style='margin:0; font-weight:900; padding:2; color:white; background-color:#003AD0; text-align:center; border-bottom:1px solid black;'>
		sverige
	</p>
		Språk: Svenska
		Invånare: 9 milj.
		osv..
	</div>

	<form method='POST' name='theform'>
		<img ID='mapImg' border=0 height='500' width='500' src='img/map/map.gif' UseMap='#map0'>
	</form>
</div>
LOOlauMedlem sedan jan. 200499 inlägg
#4

Löste det med hjälp av w3schools.com

http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap

Tack för att du tog dig tid i alla fall!

Uppskattas!

125 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
122 ms — hämta tråd, inlägg och bilagor (db)