Aller au contenu

Lien cliquable bannière dans une balise Td


Highsound

Sujets conseillés

Bonjour,

Je cherche comment intégrer un lien sur la bannière qui redirige sur la page index du forum
j'ai bien essayer dans la balise td mais ça ne fonctionne pas voila comment j'y  m'y suis pris

<a href="http://detection-lyon.leforum.eu/index.php"></a><td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">

Voici le code original du fichier overall_header.tpl mais il n'y a pas de lien sur la bannière qui redirige sur la page index.

<td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">

Et voici le lien que je veux intégrer

http://detection-lyon.leforum.eu/index.php

Merci pour votre aide et de votre contribution surtout pour un noob 🙄

Modifié par Highsound
Lien vers le commentaire
Partager sur d’autres sites

Bonjour, et bienvenue à bord du Hub !

 

Tu devrais plutôt mettre le lien dans la balisee <td> avec un texte ou une image à cliquer, comme ceci :

<td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">
<a href="http://detection-lyon.leforum.eu/index.php">Détection Lyon</a>
../..
</td>

 

Lien vers le commentaire
Partager sur d’autres sites

C'est éventuellement ce qu'il y a dans ta balise <td> ... j'imagine qu'elle ne doit pas être vide !

 

Lien vers le commentaire
Partager sur d’autres sites

Voici le fichier overall_header.tpl vers le milieux ou il y a la balise td

 

<?xml version="1.0" encoding="{S_CONTENT_ENCODING}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="dgfwarcraft.css" rel="stylesheet" type="text/css" />
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img4.xooimage.com/files/d/g/dgfwarcraft-3256a.css" type="text/css" />
<!-- BEGIN switch_enable_pm_popup -->
<script type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body style="margin:0px">
<table align="center" width="900" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="http://img110.xooimage.com/files/b/d/2/headc-gauche1-561a768.gif" width="210" height="244" alt=""></td>
		<td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">
        <span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a></span><span class="mainmenu">&nbsp;  &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp; 
						<!-- BEGIN switch_user_logged_out -->
						&nbsp;<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a></span>&nbsp;
						<!-- END switch_user_logged_out -->
		<span class="mainmenu">&nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">Messages priv&eacute;</a>&nbsp; &nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu">D&eacute;/connexion</a>&nbsp;</span>				
						<br /><br />
			</td>
		<td colspan="2">
			<img src="http://img110.xooimage.com/files/a/3/7/headc-droite-561a745.gif" width="224" height="244" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://img9.xooimage.com/files/c/a/cadrehg-3256e.gif" width="65" height="30" alt=""></td>
		<td background="http://img4.xooimage.com/files/c/a/cadrehc-3256f.gif" width="100%" height="30" colspan="3">
		</td>
		<td>
			<img src="http://img5.xooimage.com/files/c/a/cadrehd-32570.gif" width="74" height="30" alt=""></td>
	</tr>
	<tr>
		<td background="http://img6.xooimage.com/files/c/a/cadreg-32571.gif" width="65" height="100%">
			</td>
		<td background="http://img6.xooimage.com/files/f/o/fontforum-32572.gif" colspan="3" valign="top">
	<br />		
	<table cellpadding="0" cellspacing="0" border="0" width="100%">
	    <tr>
		    <td align="right">
			    <form action="{U_SEARCH}?mode=results" method="post" target="_top">
                Recherche rapide :<br /><input type="text" class="post" name="search_keywords" size="14" />&nbsp;<input type="submit" class="mainoption" name="login" value="Ok" /><br />
                </form>
			</td>
	   </tr>
	</table>
	<br />

 

Lien vers le commentaire
Partager sur d’autres sites

Comme ta balise <td> contient d'autres éléments cliquables (notamment ton menu) il n'est pas possible de rendre tout le bloc cliquable.

Il faudrait mettre ton image non pas en background-image mais en élément img distinct qui peut dans ce cas servir d'ancre pour un lien.

 

J'ai mis ton code en ligne sur mon serveur, et on voit bien que ton image a des liens placés dessus. Ils ne sont pas résolus parce que je n'ai que ton fichier d'entête... mais peu importe, on voit bien où ils sont placés.!

 

http://le-hub.net/

 

 

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

de cette manière ?

<a href="http:///index.php"><img src="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" valign="bottom"></a>

 

<?xml version="1.0" encoding="{S_CONTENT_ENCODING}"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="dgfwarcraft.css" rel="stylesheet" type="text/css" />
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img4.xooimage.com/files/d/g/dgfwarcraft-3256a.css" type="text/css" />
<!-- BEGIN switch_enable_pm_popup -->
<script type="text/javascript">
<!--
	if ( {PRIVATE_MESSAGE_NEW_FLAG} )
	{
		window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
	}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body style="margin:0px">
<table align="center" width="900" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="http://img110.xooimage.com/files/b/d/2/headc-gauche1-561a768.gif" width="210" height="244" alt=""></td>
		<td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">
        <span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a></span><span class="mainmenu">&nbsp;  &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>&nbsp; 
						<!-- BEGIN switch_user_logged_out -->
						&nbsp;<a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a></span>&nbsp;
						<!-- END switch_user_logged_out -->
		<span class="mainmenu">&nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu">Messages priv&eacute;</a>&nbsp; &nbsp;<a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu">D&eacute;/connexion</a>&nbsp;</span>				
						<br /><br />
			</td>
		<td colspan="2">
			<img src="http://img110.xooimage.com/files/a/3/7/headc-droite-561a745.gif" width="224" height="244" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="http://img9.xooimage.com/files/c/a/cadrehg-3256e.gif" width="65" height="30" alt=""></td>
		<td background="http://img4.xooimage.com/files/c/a/cadrehc-3256f.gif" width="100%" height="30" colspan="3">
		</td>
		<td>
			<img src="http://img5.xooimage.com/files/c/a/cadrehd-32570.gif" width="74" height="30" alt=""></td>
	</tr>
	<tr>
		<td background="http://img6.xooimage.com/files/c/a/cadreg-32571.gif" width="65" height="100%">
			</td>
		<td background="http://img6.xooimage.com/files/f/o/fontforum-32572.gif" colspan="3" valign="top">
	<br />		
	<table cellpadding="0" cellspacing="0" border="0" width="100%">
	    <tr>
		    <td align="right">
			    <form action="{U_SEARCH}?mode=results" method="post" target="_top">
                Recherche rapide :<br /><input type="text" class="post" name="search_keywords" size="14" />&nbsp;<input type="submit" class="mainoption" name="login" value="Ok" /><br />
                </form>
			</td>
	   </tr>
	</table>
	<br />

 

Modifié par Highsound
Lien vers le commentaire
Partager sur d’autres sites

Une solution serait de mettre une image transparente au dessus de ton menu... ce que j'ai fait !

Le lien est vers Webmaster-Hub.com , mais cela se change facilement. L'image est 1x1pixel transparent...

http://le-hub.net/

 

<td background="http://img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">
        <a href="https://www.webmaster-hub.com"><img src="FFFFFF-0.png" width="100%" height="200"></a>
        <span class="mainmenu">  .........

On voit bien que cela ne prend que la partie centrale de ton image... il faudrait mettre la même chose pour les parties gauche et droite ... et aussi peaufiner la hauteur pour que cela n'interfère pas avec tes liens de menu.

 

FFFFFF-0.png

Lien vers le commentaire
Partager sur d’autres sites

Je l'avais jointe à mon message précédent, mais elle ne peut pas se voir (logique vu que c'est un pixel transparent)

Je la joins au format zip ... :)

 

J'ai réduit aussi la hauteur de cette image dans la source et l'ai mise à 190px ... sinon ça faisait décaler un peu tes liens de menu. A voir sur ton site.

 

FFFFFF-0.zip

Lien vers le commentaire
Partager sur d’autres sites

Je ne peu pas télécharger le zip le message

Désolé, il y a un problème

This attachment is not available. It may have been removed or the person who shared it may not have permission to share it to this location.

"

Lien vers le commentaire
Partager sur d’autres sites

il y a 11 minutes, Highsound a dit :

This attachment is not available. It may have been removed or the person who shared it may not have permission to share it to this location

C'est une question de permissions pour les attachements. Ton statut de membre ne te permettait pas de les télécharger.

Cela devrait aller maintenant ;)

 

 

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

Ok merci 🙂 cependant sur le code ci dessus je ne peu pas mettre 2 fois le lien de la bannière centrale d'origine étant donner que je vais la remplacé par l'image qui provient du zip

//img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif

Il y a déjà cette image dans la balise td il faudrait que j'ajoute le lien de l'image que j'ai télécharger dans le zip je l'ai hébergée ici

5w2l.pngdonc mon code il y a une confusion que je n'ai pas compris dans la balise td il ne faut pas mettre l'image de 1x1 FFFFFF-0.png ?

je l'ai placé dans img=src je me mélange les pinceaux justement cette image de1x1 elle va se rallonger alors pas besoin de l'image au début dans la balise td //img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif

<td background="http://img110.xooimag.com/files/8/2/0/headc-centre-4-561a39.gif" width="100%" height="244" align="center" valign="bottom">
        <a href="http://detection-lyon.leforum.eu/index.php"><img src="https://zupimages.net/up/19/19/5w2l.png" width="100%" height="200"></a>

Ensuite à placer après la balise ou avant merci

<td/>

 

Modifié par Highsound
Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)

J'ai placer le code avant le menu comme ceci

<img src="https://zupimages.net/up/19/19/5w2l.png" width="1" height="1" align="center" valign="bottom">
        <a href="/index.php"><img src="FFFFFF-0.png" width="100%" height="200"></a>

dans l'ensemble voila à quel niveau je l'ai intégré

</head>
<body style="margin:0px">
<table align="center" width="900" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="http://img110.xooimage.com/files/b/d/2/headc-gauche1-561a768.gif" width="210" height="244" alt=""></td>
		<td background="http://img.xooimage.com/files110/8/2/0/headc-centre-4-561aa39.gif" width="100%" height="244" align="center" valign="bottom">
<img src="https://zupimages.net/up/19/19/5w2l.png" width="1" height="1" align="center" valign="bottom">
        <a href="/index.php"><img src="FFFFFF-0.png" width="100%" height="200"></a>
    
        <span class="mainmenu"> <a href="{U_FAQ}" class="mainmenu">{L_FAQ}</a></span><span class="mainmenu">    <a href="{U_MEMBERLIST}" class="mainmenu">{L_MEMBERLIST}</a>   <a href="{U_GROUP_CP}" class="mainmenu">{L_USERGROUPS}</a>  
						<!-- BEGIN switch_user_logged_out -->
						 <a href="{U_REGISTER}" class="mainmenu">{L_REGISTER}</a></span> 
						<!-- END switch_user_logged_out -->
		<span class="mainmenu"> <a href="{U_PRIVATEMSGS}" class="mainmenu">Messages privé</a>   <a href="{U_PROFILE}" class="mainmenu">{L_PROFILE}</a>   <a href="{U_LOGIN_LOGOUT}" class="mainmenu">Dé/connexion</a> </span>				
						<br /><br />

			</td>

 

Cependant le lien fonctionne mais on vois un cadre dans l'image 1x1 px ,et un icône au coin supérieur gauche de l'image de 1x1 px

 

 

 

153y.jpg&key=0994dd04c412c147f756b6954c5c889976c16a4f6c0d830696f2b03031507dd9

Modifié par Highsound
Lien vers le commentaire
Partager sur d’autres sites

J'ai pu intégrer différemment après plusieurs essais avec cette ajustement cela fonctionne mais j'ai du faire une image transparent de 466 px sur 244 px

<a href="http://detection-lyon.leforum.eu/index.php"><img src="https://i.postimg.cc/xdsdqcDM/prospecteur-center.png" width="100%" height="200" align="center" valign="bottom></a>

Merci pour tout et pour votre réactivité et les divers solutions

Lien vers le commentaire
Partager sur d’autres sites

Le 06/05/2019 at 17:41, Highsound a dit :

Ok merci 🙂 cependant sur le code ci dessus je ne peu pas mettre 2 fois le lien de la bannière centrale d'origine étant donner que je vais la remplacé par l'image qui provient du zip


//img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif

Il y a déjà cette image dans la balise td il faudrait que j'ajoute le lien de l'image que j'ai télécharger dans le zip je l'ai hébergée ici

5w2l.pngdonc mon code il y a une confusion que je n'ai pas compris dans la balise td il ne faut pas mettre l'image de 1x1 FFFFFF-0.png ?

je l'ai placé dans img=src je me mélange les pinceaux justement cette image de1x1 elle va se rallonger alors pas besoin de l'image au début dans la balise td //img110.xooimage.com/files/8/2/0/headc-centre-4-561aa39.gif


<td background="http://img110.xooimag.com/files/8/2/0/headc-centre-4-561a39.gif" width="100%" height="244" align="center" valign="bottom">
        <a href="index.php"><img src="https://zupimages.net/up/19/19/5w2l.png" width="100%" height="200"></a>

Ensuite à placer après la balise ou avant merci


<td/>

 

 

Lien vers le commentaire
Partager sur d’autres sites

Tu as effectivement du mal à comprendre ...

 

Si une balise <td> comprend une image de fond, et que dans cette même balise on ajoute une image transparente qui couvre totalement le fond, l'image du fond reste visible du fait de la transparence de l'image au dessus comme tu peux le voir dans la page que j'ai créée : http://le-hub.net/

C'est cette image transparente qui est l'ancre du lien, donc sa partie cliquable.

Tu peux ajouter ce que tu veux sur une image de fond sans que celle-ci ne soit perturbée, ce que tu fais d'ailleurs avec les liens de ton menu.

 

Sauve cette page localement, et regarde la source du fichier index.html ... http://le-hub.net/

 

C'est correct comme tu le montres dans ton message :

<td background="http://img110.xooimag.com/files/8/2/0/headc-centre-4-561a39.gif" width="100%" height="244" align="center" valign="bottom">
        <a href="index.php"><img src="https://zupimages.net/up/19/19/5w2l.png" width="100%" height="200"></a>
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...