image map hovereffekt für area-bereich

**Kropff** · 24.11.2008, 20:29

also background-image würde funktionieren, wenn kein bild darüber läge ;-). erstelle ein div (meinetwegen innerhalb der area) und verpass dem die eigenschaft display: none.

dann hast du zwei möglichkeiten. ich zeige mal nur die einfache variante. beim überfahren eines bereichs bindest du das bild ein per

PHP-Code:


document.getElementById('dein_bild_div').innerHTML = '<img ...>';

und positionierst das div mit

PHP-Code:


// relative oder absolute

document.getElementById('dein_bild_div').style.position = 'relative';

document.getElementById('dein_bild_div').style.top = 50px;

document.getElementById('dein_bild_div').style.left = 100px;

document.getElementById('dein_bild_div').style.zIndex = 100;

document.getElementById('dein_bild_div').style.display = 'block';

so vom prinzip her.

peter

**gourmet** · 24.11.2008, 21:32

hey danke für die Tipps, ich bin nicht grad der JS Hacker

habe aber trotzdem mal etwas gebastelt.

Code:

...
<script language="JavaScript">
function over(p_id, p_top, p_left) {
var id = p_id;
var top = p_top;
var left = p_left;
document.getElementById(id).innerHTML = '<img src="hover.png">';
document.getElementById(id).style.position = 'absolute';
document.getElementById(id).style.top = top;
document.getElementById(id).style.left = left;
document.getElementById(id).style.display = 'block';
}

	function out(p_id) {
	var id = p_id;
	document.getElementById(id).style.display = 'none';
	}
</script>

</head><body>
<area shape="poly" coords="10,12..." href="link.html" onmouseover="over(1, 10, 10)" onmouseout="out(1)">
<div id="1" style="display: none;"></div>

das funktioniert alles soweit alles schon super, aber das .png Bild flackert beim hovern

, jedenfalls dann wenn der link und das div auf der gleichen posi sind, ansonsten funktionierts wunderbar.
gibt es irgendwelche Konflikte???

image map hovereffekt für area-bereich