Mettre vos liens en images - Privilège

J'ai trouvé l'idée chez CREATION DE SITE

Cette astuce ne fonctionne que sous IE malheureusement.

Ce code peut être utilisé pour mettre en valeur une liste de liens sans recourir à un programme plus lourd tel que Snap. Au survol de la souris, l'image représentative de la destination apparaît :

Vronski Beat
La Déco d'Anna K.
Château féodal et ruine médiéval
Soviet Suprem

Pour chaque lien, vous préparez une image de petit format qui représente la destination de ce lien : avatar ou saisie d'écran de la page d'accueil.

Puis vous collez en HTML :

<script type="text/javascript">
<!-- script créé par le webmaster de : -->
<!-- www.creation-de-site.net -->
<!-- vous y trouverez des javascripts, des images, des tutoriaux et des ressources gratuites. -->
<!--
var img = new Array()
img[1]='<img src="ADRESSE ICONE BLOG 1">'
img[2]='<img src="ADRESSE ICONE BLOG 2">'
img[3]='<img src="ADRESSE ICONE BLOG 3">'
img[4]='<img src="ADRESSE ICONE BLOG 4">'
img[5]='<img src="ADRESSE ICONE BLOG 5">'

function souris_on(contenu)
{
 if (document.all)
  image.innerHTML=contenu;
}
function souris_off()
{ image.innerHTML = defaut; }
//-->
</script>

</p><a onmouseover="souris_on(img[1]);" onmouseout="souris_off();" href="ADRESSE BLOG 1">NOM BLOG 1</a> </p>
<p><a onmouseover="souris_on(img[2]);" onmouseout="souris_off();" href="ADRESSE BLOG 2">NOM BLOG 2</a> </p>
<p><a onmouseover="souris_on(img[3]);" onmouseout="souris_off();" href="ADRESSE BLOG 3">NOM BLOG 3</a> </p>
<p><a onmouseover="souris_on(img[4]);" onmouseout="souris_off();" href="ADRESSE BLOG 4">NOM BLOG 4</a> </p>
<p><a onmouseover="souris_on(img[5]);" onmouseout="souris_off();" href="ADRESSE BLOG 5">NOM BLOG 5</a> </p>

<table>
<tr>
<td>
<div id="image">
<img src="http://accel7.fdata.over-blog.com/0/37/17/67/avatar-blog-50320-tmpphp3apTG9.jpeg">
</div>
</table>

<script type="text/javascript">
<!--
if(document.all)
 var defaut = image.innerHTML;
//-->
</script>

En rouge, vous remplacez par l'adresse du lien
En bleu, vous remplacez par l'adresse du blog ou du site
En vert, vous remplacez par le nom du blog ou du site.
En violet, l'adresse de l'image qui apparaît lorsqu'aucun lien n'est survolé

Comments

[Endive]

Je profite de ce passage pour dire un grand bravo (et un grand merci) à AnnaK pour tout ce boulot. J'ai suivi la procédure pour la liste de liens, j'ai juste des petits signes qui ne devraient pas être là au passage de la souris (sais pas si on peut y faire quelque chose, j'ai peut-être pas choisi les bons liens pour les images) mais sinon ça fonctionne et c'est un vrai miracle vu que j'ai jamais trop rien réussi question design sur mon blog! Merci encore !

[Anna K]

Bonjour Endive :) Je viens voir ;)

[mab]

Question idiote sans doute mais tant pis, je n'arrive pas à créer d'autres modules "texte libre" j'en ai 2 et voudrait en rajouter. merci de prendre le temps de me répondre. j'admire beaucoup ce que vous faites . Je suis en privilège et pas trés pointue en informatique.

[Anna K]

Bonjour Mab :)Non, la question n'est pas idiote. Voici un article qui parle du 3ème module texte libre http://annak.over-blog.com/article-3201398.htmlce n 'est pas très difficile à réaliser, mais il faut être attentif.

[Lily ou Pascaly]

J'en serais ravie ... pour le css ... chez moi, ça ira , merci ;-)Bisous
Pascaly  

[Anna K]

Bonjour Pascaly :) on échange alors ? je fais le ménage dans ton CSS et toi chez moi ? ;)

[Pascaly]

Je suis revenue à l'encadrement, en mettant juste color .... ça ne fonctionne pas ...

[Anna K]

Pascaly :) si tu veux, j'irais faire un peu de nettoyage dans ton CSS, un jour. Et pas chez toi, inutile de me le demander :p

[Pascaly]

Heureusement que je suis là pour servir de test ;') je vais regarder les a hover .... Bisous
Pascaly  

[Anna K]

Rassure toi je passe aussi mon temps à tester.