Links σε ολόκληρο div

[Anastasis 48]

 

Έχουμε δημιουργήσει μία εικόνα στην οποία στο πάνω μέρος της θα είναι αυτό που θα φαίνεται στην σελίδα μας και στο κάτω μέρος της αυτό που θα φαίνεται όταν κάνουμε rollover.



Προσθέτουμε στο css αρχείο μας το παρακάτω:

κώδικας:

div.music a{ background:url(music.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; }   div.music a:hover { background:url(music.gif)  0px 50px; border: 1px solid #0099FF; }

Το μηδέν στο background property ορίζει από ποιο pixel θα φαίνεται η εικόνα μας, το text-indent θα απομακρύνει το text-link που έχουμε χρησιμοποιήσει ώστε να μην ειναι ορατό και το border: 1px solid #fff θα βάλει γύρω από το div ένα περίγραμμα άσπρο 1px.
Όταν γίνεται rollover θα δείχνει την εικόνα από το 50 px και κάτω και το border θα αλλάζει χρώμα

Και στην σελίδα μας προσθέτουμε τον παρακάω κώδιακα στο σημείο που θέλουμε να εμφανίζεται το div μας

κώδικας:

<div class="music"><a title="Music" href='#'>Music</a></div>

Live demo

Ολοκληρωμένος css κώδικας:

κώδικας:

div.music a{ background:url(music.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; }   div.music a:hover { background:url(music.gif)  0px 50px; border: 1px solid #0099FF; }  div.games a{ background:url(games.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; }    div.games a:hover { background:url(games.gif)  0px 50px; border: 1px solid #0099FF; }  div.photos a{ background:url(photos.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:20px; text-decoration:none; border: 1px solid #fff; }    div.photos a:hover { background:url(photos.gif)  0px 50px; border: 1px solid #0099FF; }  div.photoshop a{ background:url(photoshop.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.photoshop a:hover { background:url(photoshop.gif)  0px 50px; border: 1px solid #0099FF; }  div.fonts a{ background:url(fonts.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.fonts a:hover { background:url(fonts.gif)  0px 50px; border: 1px solid #0099FF; }  div.firefox a{ background:url(firefox.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.firefox a:hover { background:url(firefox.gif)  0px 50px; border: 1px solid #0099FF; }  div.dreamweaver a{ background:url(dreamweaver.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.dreamweaver a:hover { background:url(dreamweaver.gif)  0px 50px; border: 1px solid #0099FF; }  div.chat a{ background:url(chat.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.chat a:hover { background:url(chat.gif)  0px 50px; border: 1px solid #0099FF; }  div.email a{ background:url(email.gif) 0px 0px; float: left; width:150px; text-indent: -5000px; height:50px; margin-left:20px; margin-top:13px; text-decoration:none; border: 1px solid #fff; }    div.email a:hover { background:url(email.gif)  0px 50px; border: 1px solid #0099FF; }

Ολοκληρωμένος html κώδικας:

κώδικας:

<div class="music"><a title="Music" href='#'>Music</a></div> <div class="games"><a title="Games" href='#'>Games</a></div> <div class="photos"><a title="Photos" href='#'>Photos</a></div> <div class="photoshop"><a title="Photoshop" href='#'>Photoshop</a></div> <div class="fonts"><a title="Fonts" href='#'>Fonts</a></div> <div class="firefox"><a title="Firefox" href='#'>Firefox</a></div> <div class="dreamweaver"><a title="Dreamweaver" href='#'>Dreamweaver</a></div> <div class="chat"><a title="Chat" href='#'>Chat</a></div> <div class="email"><a title="Email" href='#'>Email</a></div>