html - Hvilken kommando skal jeg bruge? Onmouse - Udvikleren.dk

Tags: html css

Bruger #15540 @ 23.01.10 15:10

Hej... jeg har lagt 5 billeder i 5 lag så de ligger oven på hinanden, derefter har jeg lavet et map på det forreste billed så når jeg holder over et bestemt sted på billed skulle et af de 4 andre billeder skifte... Dette skal bruges til en menu..

Hvordan skal min koder se ud omkring onmouseover og onmouseut for at jeg kan få det til at fungere....

der hvor der står xxxx er der hvor jeg mangler en kommando

Kode

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	
		<body>
			<div id="knap1">
				<img src="1.png">
			</div>
			<div id="knap2">
				<img src="2.png">
			</div>
			<div id="knap3">
				<img src="3.png">
			</div>
			<div id="knap4">
				<img src="4.png">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
			
<map name="menu" >

	<area shape ="rect" coords ="54,6,214,46"
		onmouseover = "xxxx src=9.png"
		onmouseout = "xxxx src=1.png"
		href ="Site1.html" target ="_blank">

	<area shape ="rect" coords ="234,6,394,46"
		onmouseover = "xxxx src=10.png"
		onmouseout = "xxxx src=2.png"
		href ="Site2.html" target ="_blank">

	<area shape ="rect" coords ="414,6,574,46"
		onmouseover = "xxxx src=11.png"
		onmouseout = "xxxx src=3.png"
		href ="Site3.html" target ="_blank">

	<area shape ="rect" coords ="594,6,754,46"
		onmouseover = "xxxx src=12.png"
		onmouseout = "xxxx src=4.png"
		href ="Site4.html" target ="_blank">
</map> 

		</body>
</html>

xD håber der er nogen der forstår hvad jeg mener

7 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #8773 @ 23.01.10 17:39

658

Det er lettere hvis du laver en funktion til at klare det

Kode


<script type="text/javascript">

function changeImage(img,knap,io){
    if(io==in){
        document.getElementById(knap).src=img;
    }else{
        document.GetElementById(knap).src=img;
    }
}

</script>

og så kalde det med changeImage("9.png","knap1","in") for mouseover og
changeImage("1.png"),"knap1","out") for mouseout..

Jeg har ikke testet om det virker, men det er noget i den stil

Bruger #15540 @ 23.01.10 17:52

Thx jeg prøver når jeg får tid

så håber vi det virker

Bruger #15540 @ 24.01.10 12:11

Hmmm jeg ved ikke helt om jeg mangler nogle tegn... men det virker hvert fald ikke på den måde jeg har skrevet det på

Kode

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
			<script type="text/javascript">

function changeImage(img,knap,io){
    if(io==in){
        document.getElementById(knap).src=img;
    }
	else{
        document.getElementById(knap).src=img;
    }
}

			</script>

	</head>
	
		<body>
			<div id="knap1">
				<img src="1.png">
			</div>
			<div id="knap2">
				<img src="2.png">
			</div>
			<div id="knap3">
				<img src="3.png">
			</div>
			<div id="knap4">
				<img src="4.png">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
			
<map name="menu" >

	<area shape ="rect" coords ="54,6,214,46"
		onmouseover="changeImage('9.png,knap1,in')"
		onmouseout="changeImage('1.png,knap1,out')"
		href ="Site1.html" target ="_blank">

	<area shape ="rect" coords ="234,6,394,46"
		onmouseover = "changeImage('10.png','knap2','in')"
		onmouseout = "changeImage(2.png,knap2,out)"
		href ="Site2.html" target ="_blank">

	<area shape ="rect" coords ="414,6,574,46"
		onmouseover = "changeImage('11.png','knap3','in')"
		onmouseout = "changeImage('3.png','knap3','out')"
		href ="Site3.html" target ="_blank">

	<area shape ="rect" coords ="594,6,754,46"
		onmouseover = "changeImage('12.png','knap4','in')"
		onmouseout = "changeImage('4.png','knap4','out')"
		href ="Site4.html" target ="_blank">
</map> 

		</body>
</html>

Bruger #8773 @ 24.01.10 12:29

658

når du kalder change image, skal du lige huske at sætte '' rundt om alle sammen..

Det er lidt blandet hvad du har..

onmouseout = "changeImage(2.png,knap2,out)"
skal laves til
onmouseout = "changeImage('2.png','knap2','out')"

Bruger #15540 @ 24.01.10 14:44

det var lidt blandet hvad jeg havde var fordi at jeg prøvede at sætte tegn på alle måder jeg kunne komme i tanke om....

hhmmm skrev det som du sagde, men virker stadig ikke

Kode

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
			<script type="text/javascript">

function changeImage(img,knap,io){
    if(io=in){
        document.getElementById(knap).src=img;
    }
	else{
        document.getElementById(knap).src=img;
    }
}

			</script>

	</head>
	
		<body>
			<div id="knap1">
				<img src="1.png">
			</div>
			<div id="knap2">
				<img src="2.png">
			</div>
			<div id="knap3">
				<img src="3.png">
			</div>
			<div id="knap4">
				<img src="4.png">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
			
<map name="menu" >

	<area shape ="rect" coords ="54,6,214,46"
		onmouseover="changeImage('9.png','knap1','in')"
		onmouseout="changeImage('1.png','knap1','out')"
		href ="Site1.html" target ="_blank">

	<area shape ="rect" coords ="234,6,394,46"
		onmouseover = "changeImage('10.png','knap2','in')"
		onmouseout = "changeImage('2.png','knap2','out')"
		href ="Site2.html" target ="_blank">

	<area shape ="rect" coords ="414,6,574,46"
		onmouseover = "changeImage('11.png','knap3','in')"
		onmouseout = "changeImage('3.png','knap3','out')"
		href ="Site3.html" target ="_blank">

	<area shape ="rect" coords ="594,6,754,46"
		onmouseover = "changeImage('12.png','knap4','in')"
		onmouseout = "changeImage('4.png','knap4','out')"
		href ="Site4.html" target ="_blank">
</map> 

		</body>
</html>

Bruger #8773 @ 24.01.10 14:52

658

Ved ikke om der er noget der over hovedet hedder .src, men kig på google.. onmouseover image change eller sådan noget..

Der findes millioner af eksempler..

Bruger #15540 @ 28.01.10 11:31

xD jeg fandt selv ud af den sidste del da jeg var igang med at finde andre muligheder... jeg havde glemt at give billedet et ID, jeg troede at Div ID godt kunne bruges, men det kunne det åben bart ikke xD

Kode

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
			<script type="text/javascript">

function changeImage(img_src, img_name) {

document[img_name].src=img_src;
}
			</script>

	</head>
	
		<body>
			<div id="knap1">
				<img src="1.png" id="1">
			</div>
			<div id="knap2">
				<img src="2.png" id="2">
			</div>
			<div id="knap3">
				<img src="3.png" id="3">
			</div>
			<div id="knap4">
				<img src="4.png" id="4">
			</div>
			
			<div id="hoved">
				<img src="hoved.png" usemap="#menu" border="0">
			</div>
			
<map name="menu" >

	<area shape ="rect" coords ="54,6,214,46"
		onmouseover="changeImage('9.png','1')"
		onmouseout="changeImage('1.png','1')"
		href ="Site1.html" target ="_blank">

	<area shape ="rect" coords ="234,6,394,46"
		onmouseover = "changeImage('10.png','2')"
		onmouseout = "changeImage('2.png','2')"
		href ="Site2.html" target ="_blank">

	<area shape ="rect" coords ="414,6,574,46"
		onmouseover = "changeImage('11.png','3')"
		onmouseout = "changeImage('3.png','3')"
		href ="Site3.html" target ="_blank">

	<area shape ="rect" coords ="594,6,754,46"
		onmouseover = "changeImage('12.png','4')"
		onmouseout = "changeImage('4.png','4')"
		href ="Site4.html" target ="_blank">
</map> 

		</body>
</html>

Hvilken kommando skal jeg bruge? Onmouse

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler