JavaScript Aktivierung und Deaktivierung mit maphilight

-Rayz- · 21. Oktober 2013

Hallo,

ich habe ein Problem mit der Deaktivierung des maphilights nach deren Aktivierung. Ziel soll folgendes sein:
Ich habe auf einem Bild bestimmte Punkte die anklickbar sind. Sobald man mit der Maus über einen dieser Punkte geht, soll eine Grafik aktiviert werden wo dann später der Text drin steht. Diese Grafik soll aber nur dann aktiviert werden, wenn man mit der Maus auf einem der Punkte ist! Und hier ist das Problem. Sobald einer dieser Punkte aktiviert wurde, wird die Grafik nicht nur über die Punkte aktiviert sondern auch, wenn man mit der Maus über die Grafik selber geht! Ich finde für dieses Problem leider keine Lösung.
Ich habe Lediglich die id's "wirbel" und "stylewirbel" zum testen benutzt. Meine auskommentierten Testversuche habe ich nun nicht kopiert, kann ich aber gerne nachreichen bei Bedarf.

Code:

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script type="text/javascript">

	var vtext= new Array();
	vtext[0] = "Das koennte Ihr Text sein";
	vtext[1] = "Ganz schoen viele Knochen..";
	vtext[2] = "Noch ein Text";
	vtext[3] = "Hier steht auch Text";
	
	
function text(wert){
	meintext= vtext[wert];
	document.getElementById("text").style.display = "block";
	document.getElementById("stylehuefte").style.display = "block";
	document.getElementById("text").innerHTML="<b>Ihr Text: "+meintext+"</b>";
	
}

function reset(){
	document.getElementById("text").style.display = "none";
	document.getElementById("stylehuefte").style.display = "none";
}

window.onload = function disableWindow()
{
	document.getElementById("text").style.display = "none";
}

$(function() {

	$('.map').maphilight({fillColor: 'efefef'});

	$('#wirbel').click(function() {
        $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');
        
        $('.selected').data('maphilight', {
            alwaysOn: false
        }).trigger('alwaysOn.maphilight');
        
        $('#wirbel').removeClass('selected');
        
        $(this).addClass('selected');
			
    });
       
		$('#wirbel').mouseover(function() {
			$('.map').maphilight();
			text(0);			
            $('#stylewirbel').data('maphilight',{
			alwaysOn: true
			}).trigger('alwaysOn.maphilight');
		});
		
		$('#wirbel').mouseout(function(e) {
			reset();			
            $('#stylewirbel').data('maphilight',{
			alwaysOn: false
			}).trigger('alwaysOn.maphilight');
        });

});

</script>

<div id="leer" onclick="reset()">
<map name="textmap" class="map">
	<area  href="#" shape="polygon" coords='250,240,590,222,590,258' data-maphilight='{"stroke":true,"fillColor":"efefef","fillOpacity":0.6}' />
</map>
<table border="1">
<tr>
<td width="500" height="600" >
<img src="skelett.JPG"  alt="skelett" usemap="#skelettmap" class="map">

<map name="skelettmap">
	<area id="wirbel" shape='circle' coords='250,240,15' alt="Wirbel" href="#" data-maphilight='{"stroke":false,"fillColor":"f781be","fillOpacity":0.0}'>
	<area id ="schulter" shape='circle' coords='196,137,15' alt="Schulter" href="#" onmouseover="javascript:text(1)" data-maphilight='{"stroke":false,"fillColor":"f781be","fillOpacity":0.0}'>
	<area id="ellenbogen" shape='circle' coords='130,185,15' alt="Ellenbogen" href="#" onmouseover="javascript:text(2)" data-maphilight='{"stroke":false,"fillColor":"f781be","fillOpacity":0.0}'>
	<area id="huefte" shape='circle' coords='208,315,15' alt="Huefte" href="#" onmouseover="javascript:text(3)" data-maphilight='{"stroke":false,"fillColor":"f781be","fillOpacity":0.0}'>
  
	<area id="stylewirbel" shape="poly" coords="250,240,350,320,550,320,550,600,350,6000,350,360" alt="Legs" data-maphilight='{"stroke":false,"fillColor":"efefef","fillOpacity":1.0}'>
	<area id="styleschulter" shape="poly" coords="196,137,350,320,550,320,550,600,350,6000,350,360" alt="Legs" data-maphilight='{"stroke":false,"fillColor":"efefef","fillOpacity":1.0}'>
	<area id="styleellenbogen" shape="poly" coords="130,185,350,320,550,320,550,600,350,6000,350,360" alt="Legs" data-maphilight='{"stroke":false,"fillColor":"efefef","fillOpacity":1.0}'>
	<area id="stylehuefte" shape="poly" coords="208,315,350,320,550,320,550,600,350,6000,350,360" alt="Legs" data-maphilight='{"stroke":false,"fillColor":"efefef","fillOpacity":1.0}'>
	
</map>
  
  <div id="text"style="position:fixed;left:372px;top:336px;width:186px;height:330px;background-color:#efefef" >

</td>



</td>
</tr>
</div>
</table>

</body>
</html>

Ergänzung (22. Oktober 2013)

Lösung: mit imagemapster

Code:

<!DOCTYPE html>
<html>
<body>

<div id="leer">
<table border="1">
<tr>
<td width="500" height="600" >
<img id="shapes" src="skelett.jpg" usemap="#shapes_map" >

<map name="shapes_map">
    <area shape="poly" data-group="stylewirbel" alt="" coords="250,240,350,320,550,320,550,600,350,6000,350,360" nohref >
    <area shape="circle" data-group="wirbel" alt="" coords='250,240,15' onclick="javascript:text(2)" onmouseover="javascript:text(2)" onmouseout="javascript:reset(0)" href="#">
	
	<area shape='circle' data-group="schulter"  alt="" coords='196,137,15' href="#" onclick="javascript:text(1)" onmouseover="javascript:text(1)" onmouseout="javascript:reset(0)">
	<area shape="poly" data-group="styleschulter"  alt="" coords="196,137,350,320,550,320,550,600,350,6000,350,360" nohref>
	
	<area shape='circle' data-group="ellenbogen" alt="" coords='130,185,15' href="#" onclick="javascript:text(0)" onmouseover="javascript:text(0)" onmouseout="javascript:reset(0)">
	<area shape="poly" data-group="styleellenbogen" alt="" coords="130,185,350,320,550,320,550,600,350,6000,350,360" nohref>
	
	<area shape='circle' data-group="huefte"  coords='208,315,15' alt="" href="#" onclick="javascript:text(3)" onmouseover="javascript:text(3)" onmouseout="javascript:reset(0)">
	<area shape="poly" data-group="stylehuefte"  coords="208,315,350,320,550,320,550,600,350,6000,350,360" alt="">
	
	<area shape='circle' data-group="knie"  coords='218,467,15' alt="" href="#" onclick="javascript:text(3)" onmouseover="javascript:text(3)" onmouseout="javascript:reset(0)">
	<area shape='poly' data-group="styleknie" coords="218,467,350,320,550,320,550,600,350,6000,350,360" alt="" >
	
	<area shape='circle' data-group="fuss"  coords='235,630,15' alt="" href="#" onclick="javascript:text(3)" onmouseover="javascript:text(3)" onmouseout="javascript:reset(0)">
	<area shape='poly' data-group="stylefuss" coords="235,630,350,320,550,320,550,600,350,6000,350,360" alt="" >
	
</map>
 <div id="text"style="position:fixed;left:372px;top:336px;width:186px;height:330px;background-color:#efefef" >
</td>
</tr>
</div>
</table>
 
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<script type="text/javascript">
// script

 $('#shapes').mapster({
        noHrefIsMask: false,
        fillColor: 'efefef',
        fillOpacity: 1,
        mapKey: 'data-group',
        strokeWidth: 1,
        stroke: true,
        strokeColor: 'efefef',
		isSelectable: false,
        render_select: {
            fillColor: 'efefef',
			fillOpacity: 0
            },
        areas: [
		    {
			    key: 'wirbel',
			    includeKeys: 'stylewirbel',
			    stroke: false,
				fillOpacity: 0				
		    },
		    {
			    key: 'stylewirbel',
			    stroke: false,
			    strokeWidth: 3
		    },
			{
			    key: 'schulter',
			    includeKeys: 'styleschulter',
			    stroke: false,
				fillOpacity: 0				
		    },
		    {
			    key: 'styleschulter',
			    stroke: false,
			    strokeWidth: 3
		    },	
			{
			    key: 'ellenbogen',
			    includeKeys: 'styleellenbogen',
			    stroke: false,
				fillOpacity: 0				
		    },
		    {
			    key: 'styleellenbogen',
			    stroke: false,
			    strokeWidth: 3
		    },		
			{
			    key: 'huefte',
			    includeKeys: 'stylehuefte',
			    stroke: false,
				fillOpacity: 0				
		    },
		    {
			    key: 'stylehuefte',
			    stroke: false,
			    strokeWidth: 3
		    },	
			{
			    key: 'knie',
			    includeKeys: 'styleknie',
			    stroke: false,
				fillOpacity: 0,			
		    },
		    {
			    key: 'styleknie',
			    stroke: false,
			    strokeWidth: 3
		    },
			{
			    key: 'fuss',
			    includeKeys: 'stylefuss',
			    stroke: false,	
				fillOpacity: 0,
		    },
		    {
			    key: 'stylefuss',
			    stroke: false,
			    strokeWidth: 3
		    },
			
			
	    ]
    });
	
	
	var vtext= new Array();
	vtext[0] = "Das koennte Ihr Text sein";
	vtext[1] = "Ganz schoen viele Knochen..";
	vtext[2] = "Noch ein Text";
	vtext[3] = "Hier steht auch Text";
	
	
function text(wert){
	meintext= vtext[wert];
	document.getElementById("text").style.display = "block";
	//document.getElementById("stylehuefte").style.display = "block";
	document.getElementById("text").innerHTML="<b>Ihr Text: "+meintext+"</b>";
	
}

function reset(){
	
	document.getElementById("text").style.display = "none";
	
}

window.onload = function disableWindow()
{
	document.getElementById("text").style.display = "none";
}

</script>


</body>
</html>

Suche

JavaScript Aktivierung und Deaktivierung mit maphilight

-Rayz-

Lieutenant

Ähnliche Themen