HTML(onmouseover) probléma

2009-10-29T18:51:37+01:00

2010-05-17T01:06:59+02:00

2022-07-20T10:16:52+02:00

Csuli

Sziasztok!
Egy egyszerű, ám annál furfangosabb gondom akadt:)
Ez nem más, mint az OnMouseOver HTML-ben.
Eddig eljutottam:

<img src="1.jpg" onMouseOver="">

Azt szeretném elérni,hogy mikor a böngésző bekéri az oldalt, akkor az 1.jpg kép jelenjen meg, de mikor az egést ráér a képre, akkor cserélje a 2.jpg képre.
De akárhogy próbálom nem jövök rá.....

Mutasd a teljes hozzászólást!

Igen Javascript segítségével (is) lehet:

<img border="0" src="kep1.gif" onMouseOver="this.src='kep2.gif'" onMouseOut="this.src='kep1.gif'" >

Jelen esetben a this javascript kulcsszó a HTML img elemre - saját magára - (egyben javascript image objektum) mutat.

Mutasd a teljes hozzászólást!

Oszd meg másokkal!

- Hix
  válasza Csuli (18:51) részére
- 2009.10.29. 18:59
- permalink
HTML Tag List: How can I change an image when the mouse moves over it?
Mutasd a teljes hozzászólást!
- Csuli
  válasza Hix (18:59) részére
- 2009.10.29. 19:17
- permalink
Tehát ha jól olvasom, akkor csak Java scriptel lehet megoldani?
Mert ez alapján:
<img src="1.jpg" onMouseOver="alert('Működik')">
Esetleg arra is rálehetne bírni, hogy egy másik képet olvasson be.

Bocsi, ha nagyon hülyeségeket beszélek
Mutasd a teljes hozzászólást!
- engeng
  megoldása
- 2009.10.29. 19:50
- permalink
Igen Javascript segítségével (is) lehet:

<img border="0" src="kep1.gif" onMouseOver="this.src='kep2.gif'" onMouseOut="this.src='kep1.gif'" >

Jelen esetben a this javascript kulcsszó a HTML img elemre - saját magára - (egyben javascript image objektum) mutat.
Mutasd a teljes hozzászólást!

- Csuli
  válasza engeng (19:50) részére
- 2009.10.29. 19:55
- permalink
Nem szándékoztam javascriptet tanulni
Inkább CSS meg HTML, de úgy látom minden összefügg mindennel
Mutasd a teljes hozzászólást!
- *deleted_50434229
  válasza Csuli (18:51) részére
- 2009.10.29. 20:00
- permalink
Szia

Készítettem neked egy demot.

-= Itt nézheted meg =-

A JavaScript kódja:

<SCRIPT LANGUAGE="JavaScript">
function imagecsere(i,s)
{
document.images.src=s;
}
</SCRIPT>

Mutasd a teljes hozzászólást!
- engeng
  válasza Csuli (19:55) részére
- 2009.10.29. 20:24
- permalink
Igen. :D
Lehet css-ben is pl.:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>OLdal</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> #kep { background-image: url(kep1.gif); height: 15px; width: 15px; background-repeat: no-repeat; } #kep:hover { background-image: url(kep2.gif); height: 15px; width: 15px; background-repeat: no-repeat; } </style> </head> <body> <div id="kep"></div> </body> </html>

(A kép méretét meg kell adni!!!)
Mutasd a teljes hozzászólást!
- Epü
  válasza engeng (20:24) részére
- 2009.10.29. 21:14
- permalink
Üdv! Eljátszottam az ötleteddel.
400×300-as képpel
Ha ráegerészel vált, de rákattnál a második kép marad.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
a:link{
background-image:url(img1.jpg);
font-size:260px;
text-decoration:none;
}
a:hover{
background-image:url(img2.jpg);
font-size:260px;
text-decoration:none;
}

a:visited{
background-image:url(img2.jpg);
font-size:260px;
text-decoration:none;
}

pnav, li{
margin:0px;
padding:10px;
text-align:center;
list-style-type:none;
}
</style>
</head>

<body>

<a href="#">      </a>

</body>
</html>
Mutasd a teljes hozzászólást!
- engeng
  válasza Epü (21:14) részére
- 2009.10.29. 21:40
- permalink
Ez így rendben is van.
Hiszen a elemet használtál visited-el
:)
Mutasd a teljes hozzászólást!
- eweiskarim
  válasza Epü (21:14) részére
- 2010.05.17. 01:06
- permalink
Nem rossz amit írtok...
De az én megoldásom nem könnyebb?

A két <body></body> tag közé illesszétek be ezt:

<A HERF="LINK NEVE.htm">
<FORM><IMG NAME="imgd2" SRC="AZ ALAP KEP LINKJE" border=0
onmouseover="imgd2. src='AZ EGER HATASARA MEGVALTOZOTT KEP LINKJE'"
onmouseout="imgd2. src='ISMET AZ ALAP KEP LINKJE'">
</form></a>
Mutasd a teljes hozzászólást!

Oszd meg másokkal!

Címkék