class in <area> nutzen?

[z0oL]

Guten Abend zusammen,

verzweifle hier langsam ein einem Problemchen.

Bin grade dabei einen kleinen Adventskalender zu schreiben, der auf Basis einer Image Map funktioniert. Mit <area>-Tags habe ich so die 24 "Türchen" auf das Bild gelegt. Nun will ich nach Klick auf ein Türchen ein DIV-Overlay einblenden, das für diesen Tag Informationen beinhaltet. Der Link ist immer derselbe, da der Inhalt des Overlays dynamisch bestimmt wird.

Nun bekomme ich es verdammt nochmal nicht hin, dass sich nach einem Klick auf ein Türchen das Overlay erscheint. Bei normalen Links verwende ich class="x", durch das ich per JS das DIV einblende. Nur bei der Image Map bekomme ich es nicht hin.

Habt ihr vielleicht einen kleinen Tipp für mich? Bin ich einfach nur blind oder ist das so einfach nciht möglich?

Danke im Voraus!

z0oL

 

[fbfeix]

hallo,

schau dir das mal an:

http://www.files.chem.vt.edu/chem-ed/CHP/workshops/gdh98/images/map-scriptdemo.html

vielleicht hilft dir das weiter.

 

[z0oL]

Hallo, erstmal danke für deinen Link.

Versuche das gerade mit folgendem Script:

<script language="javascript">

function showOverlayBox() {
	//if box is not set to open then don't do anything
	if( isOpen == false ) return;
	// set the properties of the overlay box, the left and top positions
	$('.overlayBox').css({
		display:'block',
		left:( $(window).width() - $('.overlayBox').width() )/2,
		top:( $(window).height() - $('.overlayBox').height() )/2 -20,
		position:'absolute'
	});
	// set the window background for the overlay. i.e the body becomes darker
	$('.bgCover').css({
		display:'block',
		width: $(window).width(),
		height:$(window).height(),
	});
}
function doOverlayOpen() {
	//set status to open
	isOpen = true;
	showOverlayBox();
	$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
	// dont follow the link : so return false.
	return false;
}
function doOverlayClose() {
	//set status to closed
	isOpen = false;
	$('.overlayBox').css( 'display', 'none' );
	// now animate the background to fade out to opacity 0
	// and then hide it after the animation is complete.
	$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );

</script>

Wenn ich den Link anstatt ="#" jetz auf href="javascript:showOverlayBox()" setze, wird leider auch kein Fenster geöffnet.

Muss ich das javascript auch noch irgendwie anpassen?