| Autor | Zpráva | ||
|---|---|---|---|
| DanielBocek Profil |
Dobrý den ,
chci Vás poprosit o pomoc , jsem apsolutní začatečník a snažim se udělat roztřel na 3 různé stranky z jedne domeny ... a to tak že index.html bude mit pouze 3 hypertextové obrázky s efektem po nejetí myši se změní obrazek . Toto jsem vyřešil ale pokud zadam druhý obrazek tak mi zmizí effekt . Funguje to jen když tam mam ten jeden .. mužete mi poradit ? kod vypada takto : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="shortcut icon" href="images/tb.ico">
<link rel="stylesheet" href="style1.css" type="text/css">
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>Tereza Bártová</title>
</head>
<body>
<center>
<div id="obal">
<div id="tetovani">
<a href="http://www.np.cz"
onMouseOver="self.document['obrazek'].src='obrazky/obr1.gif';"
onMouseOut="self.document['obrazek'].src='obrazky/obr2.gif';">
<img name="obrazek" src="obrazky/obr1.gif" border="2px">
</a>
</div>
<div id="malovani">
</div>
<div id="hudba">
</div>
</div>
</center>
</body>
</html>CSS Takto body
{
background-color:#909268;
background-repeat: repeat;
}
#obal
{
float:center;
background-color:white;
width:900px;
height:800px;
}
#tetovani
{
width:300px;
height:800px;
background-color:#2A2A3A;
margin-right:600px;
position: absolute; width: 300px; top: autopx; left: 390px
}
#malovani
{
width:300px;
height:800px;
background-color:#2A2A3A;
position: absolute; top: autopx; left: 695px
}
#hudba
{
width:300px;
height:800px;
background-color:#2A2A3A;
margin-left:600px;
position: absolute; width: 300px; top: autopx; left: 400px
}
a {display: block; width: 300px; height: 800px; overflow: hidden;}
a:hover {text-indent: 0px;}
a img {border: none;}Prosííím o pomoc :( |
||
| DanielBocek Profil |
#2 · Zasláno: 11. 3. 2019, 17:13:03
Už jsem to vyřešil :)
|
||
| JakubHekal Profil |
#3 · Zasláno: 11. 3. 2019, 18:57:33
DanielBocek:
„Už jsem to vyřešil :)“ Mohl by jsi napsat jak si problém vyřešil. |
||
| DanielBocek Profil |
#4 · Zasláno: 12. 3. 2019, 10:56:18
JakubHekal:
Změnil jsem uplně celou strukturu :) Možná ani tet to neni dokonalé ale stránky dělám par hodin takže pro mě úspěch :D :) HTML : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="images/tb.ico">
<meta name="generator" content="PSPad editor, www.pspad.com">
<link rel="stylesheet" href="style1.css" type="text/css">
<title>Tereza Bártová</title>
</head>
<body>
<center>
<div id="tetovani">
<A href="indextetovani.html"> <img src="obrazky/tetovani.gif" onmouseover="this.src='obrazky/tetovani2.gif'" onmouseout="this.src='obrazky/tetovani.gif'"> </a>
</div>
<div id="malovani">
<A href="indexmalovani.html"> <img src="obrazky/malovani.gif" onmouseover="this.src='obrazky/malovani2.gif'" onmouseout="this.src='obrazky/malovani.gif'"> </a>
</div>
<div id="hudba">
<A href="indexhudba.html"> <img src="obrazky/hudba.gif" onmouseover="this.src='obrazky/hudba2.gif'" onmouseout="this.src='obrazky/hudba.gif'"> </a>
</div>
</center>
</body>
</html>CSS : body
{
background-color:#808080;
background-image:url(images/background.jpg);
background-repeat: auto;
}
#tetovani
{
width:300px;
height:400px;
background-color:#2A2A3A;
margin-right:600px;
position: absolute; width: 300px; top: 70px; left: 388px
}
#malovani
{
width:300px;
height:400px;
background-color:#2A2A3A;
position: absolute; top:70px; left: 690px
}
#hudba
{
width:300px;
height:400px;
background-color:#2A2A3A;
margin-left:600px;
position: absolute; width: 300px; top: 70px; left: 392px
} |
||
| Tomášeek Profil |
#5 · Zasláno: 12. 3. 2019, 11:08:10
DanielBocek:
Než šachování s onmouseover/out je lépe ten obrázek dát jako background odkazu a měnit na úrovni CSS při hoveru ten. Při sloučení obou stavů do jednoho obrázku ušetříš 1 request na server a jako bonus nedojde k probliknutí obrázku při prvním přejetí myší (což se děje i u tvého aktuálního řešení).
|
||
| DanielBocek Profil |
#6 · Zasláno: 12. 3. 2019, 17:51:26
Tomášeek:
Super diky moc za radu :) |
||
|
Časová prodleva: 5 let
|
|||
0