PAVE DE LIENS D'AMIS PERSONNALISE

N'es ce pas qu'il est beau mon Pavé d'amis dans la colonne de droite !?

Celui avec une photo de Néo dans Matrix en pleine séance de "Approche un peu que j't'éclate la face !"

C'est pas bien compliqué...un  peu d'imagination, de temps, un soupçon de patience et c'est tout à fait faisable...

Si vous voulez mettre ce pavé dans une colonne, pensez à choisir une image pas trop large, sinon l'image de l'angle retournera à la ligne et votre photo ressemblera à un puzzle...

Commencez par trouver une belle photo, ouvrez la dans Photofiltre et faites :

Fitre/Divers/Quadrillage

Régler la grandeur des cellules en pixels par rapport au nombre de liens que vous avez à mettre sur votre pavé, choisissez une couleur qui se voit bien pour dessiner le quadrillage, mettez l'épaisseur à 2, cochez les cases comme sur la capture,  Aperçu puis ok.

Le principe est simple, vous devez copier/coller chaque image (cellule) dans un nouveau cadre.

Servez-vous de l'outil sélection puis rectangle pour sélectionner la cellule.

Pour connaitre la taille de vos images (cellule), faites un clic droit dans la sélection et choisissez paramétrage manuel, notez la taille de votre première image (cellule) elles n'ont pas forcement toute ma même taille.

Dans cet exemple les 5 cellules du milieu font 58x47 alors que les 10 autres font 57x47, donc comme il nous faut 15 nouveaux cadres, faites "nouveau" choisissez 58x47 et ensuite faites Ctrl+U 4 fois pour dupliquer le cadre et en obtenir 5 identique.

Faites la même chose pour obtenir les 1O cadres de 57x47 en faisant Ctrl+U 9 fois.

Maintenant vous devez copier/coller chaque image dans le cadre qui correspond à sa taille, et l'enregistrer avec le numéro qui correspond à l'ordre des images(1,2,3,4...), car au moment de mettre les adresses dans la page d'accueil ça sera plus pratique de pouvoir repérer les images dans le bon ordre...

Une fois que vous avez enregistrez sous vos 15 images numérotées, il faut les importer une par une et dans l'ordre de préférence (1,2,3,4...) pour éviter de vous embrouiller...

Ouvrez un nouveau message et faites insertion d'une image, importez toute vos images...

Maintenant il faut créer le bloc de code que nous allons coller dans la page d'accueil dans une colonne, il vous faut la ligne de code suivante qui contient l'url du blog ou du site à visiter.

(*si vous voulez donner un effet lumière à vos images, descendez plus bas, le code n'est pas le même)

<a href="url du site" target="_blank">

Vous devez ajouter à cette ligne l'adresse entière de votre image N°1

<img alt="1" src="https://storage.canalblog.com/18/59/255038/18293536.jpg" width="40" height="36" border="0" /></a>

Ce qui donnera pour cette première ligne :

<a href="url du site" target="_blank"><img alt="1" src="https://storage.canalblog.com/18/59/255038/18293536.jpg" width="40" height="36" border="0" /></a>

Vous devez répéter cette opération autant de fois que vous avez d'image et coller pour chaque image l'adresse url du site à visiter.

Une fois fait, ouvrez votre page d'accueil et collez votre bloc de code dans une colonne, faites visualiser avant de valider.

Ouf, une bonne chose de faite...

Votre pavé est en place, si vous cliquez sur une image un site s'ouvre dans une nouvelle fenêtre.

Vous pouvez maintenant remplacer le titre des images (1,2,3,4...) par le nom du site ou le nom pseudo de la personne à qui il appartient...sur Explorer, le titre s'affiche au passage de la souris sur l'image (alt="nom du site")

Maintenant il faut donner un petit effet sympa au passage de la souris, un peu de relief ou un effet lumière, mais attention comme d'habitude l'effet n'est pas le même si vous utilisez Explorer ou Firefox...

Pour donner un effet lumière à vos images, il faut modifier le code de base*...

<a href="url du site" target="_blank"><img alt="1" src="https://storage.canalblog.com/18/59/255038/18293536.jpg" onmouseout="slowlow(this)" onmouseover="slowhigh(this)" class="gradualshine" style="opacity: 0.25;" /></a>

Soit vous prenez directement ce code, soit vous le modifier en ajoutant la ligne de codes rouge, le plus simple est de prendre ce code dés le départ pour éviter les manipulations.

Pour un effet sombre sur le pavé et une image qui s'éclaire au passage de la souris, collez dans la page d'accueil ce script avant la balise </head>

<SCRIPT language=javascript>
function popup(page,nom,option) {
window.open(page,nom,option); }
</SCRIPT>
<style type="text/css">
.gradualshine{
filter:alpha(opacity=50);
-moz-opacity:0.2;
}
</style>
<script type="text/javascript">
var baseopacity=25
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",50)
}
function slowlow(which2){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

Pour un effet lumière avec un cercle (image 3) au passage de la souris sur Explorer et un effet relief image encadrée sur Firefox choisissez ce script et collez le avant la balise </head>

<style type="text/css"> a:hover img {filter:alpha(finishopacity=0, style=2); border:1px solid;} </style></a>

Pour avoir les 2 effets en même temps, vous pouvez coller les deux scripts à la suite, mais sur Explorer ça fait sauter la page et c'est pas terrible, par contre sur Firefox c'est nickel...comme d'hab.

Oup's j'allais oublier de dire qu'il est pour toi ce tuto Sylpo

Pour un pavé comme celui là, vous devez créer des petites image 30x30 px et les associer aux liens correspondants.
Le retour à la ligne est automatique...

Comments

[lemad640]

Bonjour,
j'ai un souci... je voudrai faire une seule image par lien d'ami et ne pas creer un pavé. seulement je met le code de lien et quand je fais "nouveau message" et que je prends l'adresse de l'image importée et que je colle tout ca dans la page d'accueil dans la catégorie, ben j'ai bien l'image mais quand on clique dessus le lien vers le site n'est pas pris en compte et on est renvoyé vers le storage canalblog... là j'ai du mal...[Filp]
si t'as une soluce merci. c'est pour faire une liste de sponsors claire les uns dessous les autres.

[Double-Je]

(Re)bonsoir.
Il y a une chose que je ne comprends pas. Pour faire ceci, il faut obligatoirement avant crée sa "liste d'amis" auparavant ? Le problème c'est que dans ce cas, en ajoutant une image, il y a tout de même le lien au dessus. On ne peut pas modifier ça ?
Merci :$

[Demolite !]

[Salut]
il suffit de na pas mettre les liens...les images ne seront pas cliquables, c'est tout [Chesse]

[nounouchouette]

Coucou!
Est ce qu'il n'y a pas de problème à faire un pavé d'amis avec plus de cases que de liens pour l'instant,dans l'éventualité d'ajouter des liens pa la suite.
Merci et bonne journée
[Salut]

[sylvie]

[Salut]
je bloque apres insertion d'image
je comprend pas comment mettre l'url sur l'image je te remercie de ton aide
et ton blog est tres tres [Coeur] c genial ce que tu fais et merci de nous en faire profiter