Súgó - Keresés - Tagok - Naptár
Teljes változat: Egérre változó button CSS-el.
PC WORLD Segélyvonal > WEBSAROK > Webszerkesztés, programozás > CSS
tamasir
2006. június 29. 17:11
Szeretnék a lapomon feltenni két valid buttont.
Ez lenne állandóan fent.
IPB kép
Ha az egérrel fölé meggyek, akkor erre vált és ezzel lehetne behozni a validator ellenőrzőt.
IPB kép
Erre a kódra:
KÓD
<A href="http://jigsaw.w3.org/css-validator/check/referer" target=_blank>

Tud valaki egy kódot?
Garono
2006. június 29. 18:36
HTML BODY:
KÓD
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://www.tamasifaiskola.dox.hu/valid_css.gif" alt="halvany" id="halvany" />
<img src="http://www.tamasifaiskola.dox.hu/h_valid_css.gif" alt="eros" id="eros" />
</a>

CSS:
KÓD
img {
   border: 0px;
}

a #eros {
   display: none;
}

a:hover #eros {
   display: block;
}

a:hover #halvany {
   display: none;
}
Kovács Gyula (MiniDisc)
2006. június 29. 18:39
Az img {} közé kell a szélesség-magasság megadás is, különben nem fog látszani a kép.
Ezen kívül nem ártana megadni az a-nak a kép elérési útvonalakat: url(valid_halvany.jpg) no-repeat; illetve ide is szélesség, és magasság. Az a:hoverhez ugyanígy, csak a másik képet értelemszerűen.
Garono
2006. június 29. 18:40
Ki is próbáltam, mielőtt elküldtem, és így is jó. Persze tudom, ez így nem szabványos, de példának megteszi. smile.gif
tamasir
2006. június 30. 10:20
@ Gyula! A html kód az szabványos? Mert az is jó lenne nekem. laughing.gif
@Garono köszönöm a gyors választ.thumbsup.gif
Garono
2006. június 30. 10:24
Csak utólag nézem, Explorerben nem jó. sad.gif De nem tudom miért, mert az a:hover-t és a display: none-t is ismeri. Úgy is megpróbáltam, ahogy MD mondta, úgy se lett jó IE-ben. evil.gif
Spányik Balázs
2006. június 30. 12:17
Az "a: hover #akármi"-t nem ismeri.
Giraffe
2006. június 30. 14:05
Hmmm, itt egy kód, ami viszont csak IE alatt megy. annoyed.gif

KÓD
<div id="valid"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"></a></div>

KÓD
#valid {
    display: inline;
    width: 57px;
    height: 20px;
    background-image: url(valid_css.gif);
}

#valid a {
    width: 100%;
    height: 100%;
}

#valid a:hover {
    background-image: url(h_valid_css.gif);
}

Akinek van egy kis ideje a hétvégén, az megpróbálhatna a kettőből egy olyan megoldást összehotni, ami megy mind a két böngésző alatt. roll.gif
Kovács Gyula (MiniDisc)
2006. június 30. 14:13
Nekem van működő megoldásom, használom is pl. a http://mddesign.minidiscweb.hu oldalam felső menüsorában (meg persze más weboldalaimon is), de jelenleg eléggé szarul vagyok (beteg), hogy gondolkodni tudjak. Ha addig nem születik megoldás, szombat délután - vasárnap délelőtt beteszem a kódot.
tamasir
2006. június 30. 14:27
@Gyula!Jobbulást Neked! doctor.gif
Kovács Gyula (MiniDisc)
2006. június 30. 15:21
Na, kicsit jobban vagyok, úgyhogy itt a kért kód:

html

KÓD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="hu" />
<title>Képhover</title>
<link href="tamasir.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="grafika.ico" />
<meta name="author" content="Gyula Kovacs [MiniDisc]" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
</head>
<body>
<div id="validdiv">
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img src="valid_atl.gif" alt="Validator" /></a>
</div>
</body>
</html>


alap css:

KÓD
#validdiv{
width: 57px;
border: 0;
margin: 0;
padding: 0;
background: url(valid_css.gif) no-repeat;
}

img {
width: 57px;
border: 0;
margin: 0;
}

a {
color: #000001;
text-decoration: none;
padding: 5px 0 0 0;
}

a:hover {
color: #000001;
background: url(h_valid_css.gif) no-repeat;
}


ie hack css:

KÓD
a {
padding: 0;
}


A működő weboldal: Link.

A validator nyekereg a background színek miatt, ez elkerülhető, ha nem gif képet használsz. (Legalább is a hover warningja mindenképpen) Én nem foglalkozok vele, csak ha hibamentesen "eltüntethető".
tamasir
2006. június 30. 18:10
@Gyula! Nagy vagy, mint általában.Köszönöm. Holnap felteszem és beszámolok a sikerről. worship.gif
tamasir
2006. június 30. 18:31
@Gyula.
Most már csak egy kis gondom van: a html részbe a div-ben itt
KÓD
<body>
<div id="validdiv">
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank"><img src="valid_atl.gif" alt="Validator" /></a>
</div>
</body>
</html>

Ebben a részben img src="valid_atl.gif" így kell? Vagy melyik gift kell betennem? a h_valid_css.gif blush.gif
Kovács Gyula (MiniDisc)
2006. június 30. 18:51
Ohh, igen, bocsi: Szóval csinálj egy teljesen átlátszó gif képet akkora méretben, mint a valid-képeid. smile.gif
tamasir
2006. július 1. 11:29
Sajnos nem sikerült. Az oldalamon a fejlécet és az összes IMG-vel meghívott kép fájt összehuzza 57px-re. weep.gif Lemásoltam és átalakítottam, két képre a Te "tamasir".css és azt is feltettem azzal sem jó. sad.gif
Kovács Gyula (MiniDisc)
2006. július 1. 11:48
Persze hogy összehúzza. smile.gif Értelemszerüen kell(ene) alkalmazni. Pl. a css-be az img elé írd be: #validdir Akkor az 57px-es méretet csak a validdirben lévő képre fogja alkalmazni.
Tehát: #validdir img {}
Az oldaladhoz nem tudok (és nem is akarok) személyreszabott kódot írni, csak egy működő példát adtam. Ezt alkalmazd magadnál megfelelően, de ne egy az egyben másold le. smile.gif
tamasir
2006. július 2. 22:03
@Gyula!
Ez menne is, csak az a baj, hogy ha validcss alatt a validhtml-t is be szeretném tenni azt nem jelenteti meg.
Próbáltam más validcssdiv és validhtmldiv-vel is. A CSS-ben az url(valid_css.gif) ill. url(valid_html401.gif) ként jelentettem meg. Az a:hover -nél szintén. Sajnos csak a css.gif jelenik meg. blush.gif
A legnagyobb baj az, hogy nem értek semmit a css-hez és erre vonatkozóan nem is találtam semmi leírást. blink.gif
tamasir
2006. július 3. 18:32
Sikerült megoldanom! yeah.gif
Itt a bizonyíté! Egy egészen más megoldás lett a nyerő!
Link
Css része
KÓD
#validdiv a
   {
   display: block;
   text-indent: -1000px;
   overflow: hidden;
   width: 57px;
   height: 20px;
   }

a#validcss:link
   {
   background: transparent url('valid_css.gif') no-repeat;
   }
a#validcss:active
   {
   background: transparent url('valid_css.gif') no-repeat;
   }
a#validcss:visited
   {
   background: transparent url('valid_css.gif') no-repeat;
   }

a#validcss:hover
  {
  background: transparent url('h_valid_css.gif') no-repeat;
  }
a#validhtml:link
{
   background: transparent url('valid_html401.gif') no-repeat;
   }
a#validhtml:active
{
   background: transparent url('valid_html401.gif') no-repeat;
   }
a#validhtml:visited
   {
   background: transparent url('valid_html401.gif') no-repeat;
   }

a#validhtml:hover
  {
  background: transparent url('h_valid_html401.gif') no-repeat;
  }

Html része
KÓD
<body>
<div id="validdiv">
<a id="validcss" href="http://jigsaw.w3.org/css-validator/check/referer"  target="_blank">Valid vagyok;) </a><br>
<a id="validhtml" href="http://validator.w3.org/check/referer" target="_blank">Valid vagyok;) </a>
</div></body>

és nem csak működik, hanem a CSS- része valid is. A HTML része pedig az oldalamon Valid. A teszt lapon nem. laughing.gif Köszönöm a segítséget!
Garono
2006. július 3. 18:39
CSS-re leírást?! annoyed.gif

- CSS alapjai
- Bevezetés a CSS alapjaiba
- CSS2 specifikáció
- CSS referencia
- Stílusok használata
- CSS alapok

Na most hirtelen ennyi, de rengeteg van! roll.gif
Ez a tartalom egy lebutítottváltozata. A teljes változat képekkel kiegészült megtekintéséhez kérünk, kattints ide.