CSS image roll-over

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
emphasy
Honorary Member
Δημοσιεύσεις: 4303
Εγγραφή: 16 Ιαν 2005 10:31

CSS image roll-over

Δημοσίευση από emphasy » 25 Σεπ 2005 21:42

Είχα μια απορία, αρκετά γελοία για μερικούς! Πως μπορώ να κάνω μια εικόνα στο rollover να αλλάζει όπως εδώ: www.zeldman.com , στα banners, happy cog & A LIST APART !

Αφού έλυσα την απορία μου, είπα να μοιραστώ την λύση μαζί σας, για όποιους δεν ξέρουν το πως...

O CSS κώδικας:

Κώδικας: Επιλογή όλων

div#mymenu {

 width:700px;
 height:60px;
 background: transperent no-repeat;
 
 }

div#mymenu h1#home	{
    text-indent: -9999px;
	width: 175px;
	height: 30px;
	}

div#mymenu h1#home a	{
	display:block;
	width: 100%;
	height: 100%;
	font-size:10px;
	text-decoration:none;
	background: transparent url(home.png) top left no-repeat;
	}

div#mymenu h1#home a:hover	{
	background: transparent url(home.png) 0 -30px no-repeat;
	}
και ο HTML κώδικας:

Κώδικας: Επιλογή όλων

<div id="mymenu">
<h1 id="home"><a href="http&#58;//www.outbreakart.com/">bk</a></h1>
</div>
Και το στο πρότελευταίο, αν προσέξετε μόλις το επισκεφτήτε 8α αλλάξει χρώμα!

o CSS κώδικας του:

Κώδικας: Επιλογή όλων

div#mymenu &#123;

 width&#58;700px;
 height&#58;60px;
 background&#58; transperent no-repeat;
 
 &#125;

div#mymenu h3#con	&#123;
    text-indent&#58; -9999px;
	width&#58; 175px;
	height&#58; 21px;
	&#125;

div#mymenu h3#con a	&#123;
	display&#58;block;
	width&#58; 100%;
	height&#58; 100%;
	font-size&#58;10px;
	text-decoration&#58;none;
	background&#58; transparent url&#40;arrow2.png&#41; top left no-repeat;
	&#125;

div#mymenu h3#con a&#58;hover	&#123;
	background&#58; transparent url&#40;arrow2.png&#41; 0 -42px no-repeat;
	&#125;

div#mymenu h3#con a&#58;visited	&#123;
	background&#58; transparent url&#40;arrow2.png&#41; 0 -21px no-repeat;
	&#125;
και το html του:

Κώδικας: Επιλογή όλων

<h3 id="con"><a href="http&#58;//www.outbreakart.com/lolololo">bk</a></h3>
Και αυτό όλο, από μια img όπως αυτήν:

Εικόνα

Και το παράδειγμα!

Όλες οι προτάσεις και οι ερωτήσεις δεκτές! :D

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες