Images avec des liens
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Images avec des liens
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.
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♥-
-Bella♥-
Dernière édition par Bella♥ le Dim 2 Oct 2011 - 8:58, édité 1 fois
Re: Images avec des liens
Bonjour Bella,
Alors c'est du html avec du css.
Le code HTML (par exemple) :
Dans la feuille de style CSS :
- 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.
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>
Dans la feuille de style CSS :
La propriété de feuille de style css filter accepte comme valeur :/*transparency-code*/
.transpa:hover {
opacity : 0.5;
-moz-opacity : 0.5;
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
filter : alpha(opacity=50); /* IE < 8 */
}
- 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.
Re: Images avec des liens
Je ne comprends pas vraiment...
Re: Images avec des liens
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 ?
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 ?
Re: Images avec des liens
Mais sa ne m'explique pas comment y mettre des liens au endroits désirée ?
Re: Images avec des liens
Final-Blond a écrit:Alors c'est du html avec du css.
Le code HTML (par exemple) :Au "span" on a donné un "class" avec l'identifiant "transpa" (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>
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.
Re: Images avec des liens
Je ne comprends pas tout...
Enfin rien plutôt...
Enfin rien plutôt...
Re: Images avec des liens
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...
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...
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...
Re: Images avec des liens
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.
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
Re: Images avec des liens
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.
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.
Re: Images avec des liens
Je c'est réaliser un tableau.
Re: Images avec des liens
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:
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 :
En gros voilà ce que donne le tableau :
Sans les bordures :
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>
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 |
Re: Images avec des liens
Merci, mais y'a quoi comme éditeur d'image ?
Re: Images avec des liens
Merci, sujet résolue.
Sujets similaires
» problème avec Défilement d'images avec liens (partenaires) :
» centrer des images liens
» Problème avec Calendrier (pas même thème) et avec images
» Images et liens non visibles
» Probleme d'images et de liens
» centrer des images liens
» Problème avec Calendrier (pas même thème) et avec images
» Images et liens non visibles
» Probleme d'images et de liens
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum