Jump to content
GSForum - Segélyvonal

Egérre változó button CSS-el.

tamasir

By tamasir
in CSS

 Share

Recommended Posts

tamasir

tamasir

Posted
Posted

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:

<A href="http://jigsaw.w3.org/css-validator/check/referer" target=_blank>

Tud valaki egy kódot?

Garono

Garono

Posted
Posted

HTML BODY:

<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:

img {
   border: 0px;
}

a #eros {
   display: none;
}

a:hover #eros {
   display: block;
}

a:hover #halvany {
   display: none;
}

Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

Posted
Posted

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

Garono

Posted
Posted

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. :)

tamasir

tamasir

Posted
  • Author
Posted

@ Gyula! A html kód az szabványos? Mert az is jó lenne nekem. :lol:

@Garono köszönöm a gyors választ.:oké:

Garono

Garono

Posted
Posted

Csak utólag nézem, Explorerben nem jó. :( 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. :gonosz:

 

payskin

payskin

Posted
Posted

Az "a: hover #akármi"-t nem ismeri.

Giraffe1

Giraffe1

Posted
Posted

Hmmm, itt egy kód, ami viszont csak IE alatt megy. :S

 

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

#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. :hááát:

Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

Posted
Posted

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

tamasir

Posted
  • Author
Posted

@Gyula!Jobbulást Neked! :szuri:

Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

Posted
Posted

Na, kicsit jobban vagyok, úgyhogy itt a kért kód:

 

html

 

<!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:

 

#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:

 

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

tamasir

Posted
  • Author
Posted

@Gyula! Nagy vagy, mint általában.Köszönöm. Holnap felteszem és beszámolok a sikerrõl. :istenvagy:

tamasir

tamasir

Posted
  • Author
Posted

@Gyula.

Most már csak egy kis gondom van: a html részbe a div-ben itt

<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 :upsz:

Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

Posted
Posted

Ohh, igen, bocsi: Szóval csinálj egy teljesen átlátszó gif képet akkora méretben, mint a valid-képeid. :)

tamasir

tamasir

Posted
  • Author
Posted
Sajnos nem sikerült. Az oldalamon a fejlécet és az összes IMG-vel meghívott kép fájt összehuzza 57px-re. :Sír: Lemásoltam és átalakítottam, két képre a Te "tamasir".css és azt is feltettem azzal sem jó. :(
Kovács Gyula (MiniDisk)

Kovács Gyula (MiniDisk)

Posted
Posted

Persze hogy összehúzza. :) É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. :)

tamasir

tamasir

Posted
  • Author
Posted

@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. :upsz:

A legnagyobb baj az, hogy nem értek semmit a css-hez és erre vonatkozóan nem is találtam semmi leírást. :pislog:

tamasir

tamasir

Posted
  • Author
Posted

Sikerült megoldanom! :yeah:

Itt a bizonyíté! Egy egészen más megoldás lett a nyerõ!

Link

Css része

#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

<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. :lol: Köszönöm a segítséget!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...