Images avec des liens

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Images avec des liens

Message par Bella♥ Jeu 29 Sep 2011 - 18:44

Bonjour,

J'ai souvent vus dans des forums, que leurs tableau était fait avec une image, mais cette image contient pleins de lien, quand on passe la souris sur un petit carré sa lui change d'opacité etc...

Comment on fait ceci ?

Merci d'avance.

Cordialement
-Bella♥-


Dernière édition par Bella♥ le Dim 2 Oct 2011 - 8:58, édité 1 fois
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Jeu 29 Sep 2011 - 20:01

Bonjour Bella,

Alors c'est du html avec du css.

Le code HTML (par exemple) :
Code:
<table align="center"><tbody><tr>
<td align="center" valign="middle"><span class="transpa"><a href="url_de_la_page" target="_blank"><img src="url_de_image" /></a></span></td>
</tr></tbody></table>
Au "span" on a donné un "class" avec l'edentifiant "transpa" (par exemple).

Dans la feuille de style CSS :
/*transparency-code*/
.transpa:hover {
opacity : 0.5;
-moz-opacity : 0.5;
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
filter : alpha(opacity=50); /* IE < 8 */
}
La propriété de feuille de style css filter accepte comme valeur :
- nombre : compris entre 0 et 100,
0 étant totalement transparent et 100 totalement opaque.

Les 4 valeurs doivent être pareilles = deux fois en dixième et deux fois en dizaine.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Ven 30 Sep 2011 - 16:21

Je ne comprends pas vraiment...
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Ven 30 Sep 2011 - 17:02

Eh bien là où tu veux mettre ton image (message d'accueil, description de forum, post, etc) on utilise le code html.

Dans le PA >> Affichage >> Couleurs > Feuille de style CSS
Tu ajoutes le code css de transparence.

Quant aux explications de valeurs, comment le dire plus clairement ?
Les 4 valeurs sont en gros les mêmes, sauf que deux sont en dixième (0.5)
Les deux autres, les mêmes nombres mais en dizaine (50)

0.1 et 100 est la valeur à 100% opaque (pas de transparence)
0.01 et 1 est à 99% transparent.

Tu vois ?
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Ven 30 Sep 2011 - 17:19

Mais sa ne m'explique pas comment y mettre des liens au endroits désirée ?
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Ven 30 Sep 2011 - 17:44

Final-Blond a écrit:Alors c'est du html avec du css.

Le code HTML (par exemple) :
Code:
<table align="center"><tbody><tr>
<td align="center" valign="middle"><span class="transpa"><a href="url_de_la_page" target="_blank"><img src="url_de_image" /></a></span></td>
</tr></tbody></table>
Au "span" on a donné un "class" avec l'identifiant "transpa" (par exemple).

Dans la feuille de style CSS :
/*transparency-code*/
.transpa:hover {
opacity : 0.5;
-moz-opacity : 0.5;
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
filter : alpha(opacity=50); /* IE < 8 */
}

url_de_la_page en vert aussi dans le code, veut dire l'adresse internet de la page, exemple :
https://forum.forumactif.com/forum
url_de_image en vert aussi dans le code, veut dire l'adresse internet de l'image, exemple :
https://2img.net/i/fa/i/smiles/icon_mrgreen.png

Ces deux url se mettent exactement là où c'est indiqué :
entre les guillemets.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Ven 30 Sep 2011 - 18:10

Je ne comprends pas tout...
Enfin rien plutôt...
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Ven 30 Sep 2011 - 18:17

Bon alors c'est peut-être moi qui n'est pas compris ton problème, parce que pour avoir une image qui mène à un lien, je ne vois pas comment te l'expliquer autrement...
Mince

Maintenant si c'est une image de fond avec du texte (des mots) qui fait office de différents liens, alors c'est un autre code.

Si c'est une image contenant des éléments faisant office de liens, alors c'est avec un éditeur d'image comme Gimp que c'est faisable.

Les balises de tableau "table", "tbody", "tr", "td" ne sont là qu'à titre d'exemple.

Bref, dire "je ne comprends rien" sans expliquer ce qui bloque ou préciser mieux ta demande, va nous faire tourner toutes les deux en chèvres... Mr. Green
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Ven 30 Sep 2011 - 18:24

Moi je parle d'un tableau comme sur ce Forum :
Je l'est cacher, comme sa seul ce qui on poster le voient, pour éviter un peu la pub.


Dernière édition par Bella♥ le Ven 30 Sep 2011 - 18:50, édité 1 fois
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Ven 30 Sep 2011 - 18:44

Tu peux supprimer le lien.

Il s'agit d'un tableau avec une image fond et avec des liens en texte.

Cependant, te donner les codes en gros, ça je veux bien, mais sauras-tu l'utiliser ?
Je peux seulement t'aider, pas te fournir du tout fait, tu comprends ?
Je te suggère de faire une recherche sur la toile, et déjà voir comment réaliser un tableau.
C'est assez simple à comprendre.
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Ven 30 Sep 2011 - 18:51

Je c'est réaliser un tableau.
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par kheino Ven 30 Sep 2011 - 21:55

En fait l'image a été faite par un éditeur d'images, c'est à dire que les liens ont été faits sur l'image directement.

OK, alors avec ce que je t'ai donné plus haut comme code, nous avons déjà la base.

En HTML dans PA >> Affichage >> Page d'accueil > Généralité > Message d'accueil avec html activé ainsi :
:+html:

Code:
<table align="center" width="430" cellspacing="1" cellpadding="0" border="3"><tbody>
<tr>
<td colspan="3">TITRE</td></tr>
<tr>
<td rowspan="2" colspan="2"><span class"textablo">BLABLABLA BLABLABLA BLABLABLA<br />
BLABLABLA BLABLABLA BLABLABLA<br />
BLABLABLA BLABLABLA BLABLABLA<br />
BLABLABLA BLABLABLA BLABLABLA<br />
BLABLABLA BLABLABLA BLABLABLA</span></td><td><span class"textablo"><a href="url_de_la_page" target="_blank">blablabla</a></span></td></tr><tr><td><span class"textablo"><a href="url_de_la_page" target="_blank">blablabla</a></span></td></tr>
<tr class"textablo">
<td><span class"textablo"><a href="url_de_la_page" target="_blank">blablabla</a></span></td><td><span class"textablo"><a href="url_de_la_page" target="_blank">blablabla</a></span></td><td><span class"textablo"><a href="url_de_la_page" target="_blank">blablabla</a></span></td></tr></tbody></table>
</tbody></table>
Les attributs :
colspan="nombre de cellules" définit le nombre de cellules à fusionner horizontalement (colonnes=td)
rowspan="nombre de cellules" définit le nombre de cellules à fusionner verticalement (lignes=tr)
Pour commencer un tableau, c'est mieux de lui mettre une bordure et un espace de cellule pour mieux voir les cellules et ce que l'on fait, ensuite il faut remettre le border="0" et le cellspacing="0" (surtout avec une image en fond).

En ce qui concerne le CSS, il y a deux attributs, l'un pour le "table" qui gèrera l'image de fond, les bords, les arrondis, etc du tableau.
Dans l'exemple l'identifiant bgtable (à toi de mettre dans le CSS image de fond etc)
L'autre pour tout ce qui est le texte textablo (à toi de donner tes propriétés au texte)
Bien sûr tu peux ajouter autant de "class" que tu veux diversifier le texte des cellules ou les cellules elles-mêmes,
ou bien mettre le style css directement dans la balise html,
ou encore faire le style en html...

Pour l'image de fond, dans le CSS c'est :
.bgtable {
background: #couleur url('lien_image') top left no-repeat;
}

En gros voilà ce que donne le tableau :

TITRE
BLABLABLA BLABLABLA BLABLABLA
BLABLABLA BLABLABLA BLABLABLA
BLABLABLA BLABLABLA BLABLABLA
titre_lien
titre_lien
titre_lien
titre_lien
titre_lien

Sans les bordures :

TITRE
BLABLABLA BLABLABLA BLABLABLA
BLABLABLA BLABLABLA BLABLABLA
BLABLABLA BLABLABLA BLABLABLA
titre_lien
titre_lien
titre_lien
titre_lien
titre_lien
kheino

kheino
Membre habitué

Féminin
Messages : 1698
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
kheino a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Sam 1 Oct 2011 - 13:51

Merci, mais y'a quoi comme éditeur d'image ?
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par tupac Sam 1 Oct 2011 - 20:58

Bonsoir

cela s'appel une image MAP
Peut-être que ce sujet pourra vous aider.

Cordialement
tupac

tupac
Membre actif

Masculin
Messages : 2551
Inscrit(e) le : 13/10/2010

http://codactif.monalliance.com/
tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Images avec des liens

Message par Bella♥ Dim 2 Oct 2011 - 8:56

Merci, sujet résolue.
Bella♥

Bella♥
****

Féminin
Messages : 344
Inscrit(e) le : 14/07/2011

http://diamonds-graph.forumactif.org
Bella♥ a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum