Witam,
Zrobiłem menu w gimpie przy użycia filtra image map
wszystko pięknie działa, ale chciałbym dodać jakiś efekt podczas najeżdżania kursorem na napis w menu.
Wiem, że trzeba zastosować do tego skrypt kontrolujący onmouseover, ale takowego nie znalazłem w sieci, może ktoś robił coś podobnego i mógłby poratować?
Oto kod:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="node1">
<img src="sciana0.jpg" width="980" height="522" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="731,78,819,122" onmouseover="cien1.gif" onmouseout="cien2.gif" href="file:/news.html" />
</map>
</div>
</div>
</body>
</html>
Skrypt do kontroli zdarzeń onmouseover
Re: Skrypt do kontroli zdarzeń onmouseover
Witam
w miejscach " onmouseover" i "onmouseout" nalezy wstawić skrypt javascript który będzie podmieniał obrazki.
Przykładowy scrypt (pisze z głowy czyli z niczego więc nie gwarantuje że zadziała ale idea ma być taka)
Utwórz plik js i podlinkuj go do strony np. "skrypt.js"
w scrypcie napisz:
a w pliku html zmien
do tego jeszcze można by pomieszać w cssie - ale sądzę że powyzsza idea może naprowadzi Cię na optymalne rozwiązanie.
pozdrawiam
Darek
Kod: Zaznacz cały
<area shape="rect" coords="731,78,819,122" onmouseover="cien1.gif" onmouseout="cien2.gif" href="file:/news.html" />
Przykładowy scrypt (pisze z głowy czyli z niczego więc nie gwarantuje że zadziała ale idea ma być taka)
Utwórz plik js i podlinkuj go do strony np. "skrypt.js"
w scrypcie napisz:
Kod: Zaznacz cały
var x = 0;
function podmiana(x){
areaobraz = document.getElementById['areaobraz'];
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}
}
Kod: Zaznacz cały
<area id="areaobraz" shape="rect" coords="731,78,819,122" onmouseover="podmiana(1)" onmouseout="podmiana(2)" href="file:/news.html" />
pozdrawiam
Darek
Re: Skrypt do kontroli zdarzeń onmouseover
Zrobiłem dokładnie, jak napisałeś i teraz nawet po najechaniu na obiekt nie zmienia się kursor 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>
<div id="node1">
<img src="logo5.jpg" width="1011" height="1225" border="0" usemap="#map" />
<map name="map">
<area id="areaobraz" shape="rect" coords="731,78,819,122" onmouseover="podmiana(1)" onmouseout="podmiana(2)" href="file:/news.html" />
</map>
</div>
</html>
Utworzyłem plik skrypt.js
var x = 0;
function podmiana(x){
areaobraz = document.getElementById['areaobraz'];
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}
}
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="skrypt.js"></script>
</head>
<body>
<div id="node1">
<img src="logo5.jpg" width="1011" height="1225" border="0" usemap="#map" />
<map name="map">
<area id="areaobraz" shape="rect" coords="731,78,819,122" onmouseover="podmiana(1)" onmouseout="podmiana(2)" href="file:/news.html" />
</map>
</div>
</html>
Utworzyłem plik skrypt.js
var x = 0;
function podmiana(x){
areaobraz = document.getElementById['areaobraz'];
if(x==1){
areaobraz.style.background = 'cien1.gif'
}else{
areaobraz.style.background = 'cien2.gif'
}
}