Image cliquable pour la bannière

**eristofflyon** · 09/02/2009, 05h09

Bonjour à tous,

J'ai (encore) un soucis avec le design de mon site, plus précisément avec ma bannière. Celle-ci contient deux publicités (une à gauche, et une à droite - qui entourent mon logo). J'ai donc découper ma bannière en tranche mais pour mettre les images cliquables sous joomla les choses se compliquent. Au final, j'ai gardé une seule image où j'ai voulu utiliser la balise<area> dans l'index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="logo"><a id="top_left_ad" area shape="rect" coords="9,29,131,125" href="http://www....com" title="click"></a></div>

Existerait-il une autre manière de rendre les zones cliquables ou est-ce déjà une bonne manière (mais mal employée)?

Merci par avance,
Loïc

**Siguillaume** · 10/02/2009, 15h44

Bonjour, là je crois que tu es directement dans le code.
Tu aurais pu le faire plus simplement en utilisant le composant bannières disponible via l'interface d'administration

**eristofflyon** · 16/02/2009, 01h44

Merci pour ta réponse, j'ai dû mal avec le composant bannière. En pièce jointe j'ai mis le type de ma bannière. Est-ce possible de la faire avec le composant bannière?

**Siguillaume** · 16/02/2009, 12h18

En théorie, oui cela est possible.

Mais tu devras user d'un peu d'ingéniosité

.

Je pense à deux façons de faire ça:

la première: Tu crées une image qui sera l'ensemble des trois images, et tu le fais afficher à l'endroit approprier.

la seconde: tu cherches ou tu crées un template qui as les trois positions que tu as indiquées, puis tu affiches les images sur ces positions.

Bonne suite!

**eristofflyon** · 17/02/2009, 02h57

Alors j'ai réussi à créer la bannière en la divisant en trois éléments. Elle fonctionne parfaitement sous Safari, par contre elle ne s'affiche pas sous Firefox (seuls les liens apparaissent, pas les images) et pire encore, elle fait planter le site sous Internet Explorer (message d'erreur qui indique qu'il est impossible de charger la page).

Voici mon index.php pour les images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="header">
				<div id="header_l">
					<div id="header_r">
						<a href="http://www...com"><div id="logo" border="0">	
						</div></a>
						<a href="http://www...com"><div id="ad_left">
						</div></a>
						<a href="http://www...com"><div id="ad_right">
						</div></a>
						<jdoc:include type="modules" name="top" />
					</div>
				</div>
			</div>

Et le template.css qui va avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
div#logo {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 977px;
	height: 132px;
	background: url(../images/new/banner.png) 0 0 no-repeat;
	margin-left: 30px;
	margin-top: 5px;
}
 
div#ad_left {
	position: absolute;
	left: 0;
	top: 0;
	float: left;
	width: 182px;
	height: 114px;
	background: url(../images/new/adtopleft.jpg) 0 0 no-repeat;
	margin-left: 29px;
	margin-top: 23px;
} 
div#ad_right {
	position: absolute;
	left: 0;
	top: 0;
	float: right;
	width: 182px;
	height: 114px;
	background: url(../images/new/adtopright.jpg) 0 0 no-repeat;
	margin-left: 829px;
	margin-top: 24px;
}

**Siguillaume** · 17/02/2009, 09h15

Ok, je vois que tu as opté pour la personnalisation d'un template. C'est aussi bien

A regarder tes scripts, je ne vois d'où peux venir l'erreur, mais je pense qu'est au niveau du css. Essaie de reduire les dimensions des div, surtout la valeur du width et communique le résultat que ça donne

Quand je fais la somme des valeurs de tes largeurs (width), je me retrouve avec 1341px. C'est énorme pour certains navigateurs, même avec la possibilité des barres de défilement.

**eristofflyon** · 18/02/2009, 07h12

Merci pour l'aide, je vais regarder la taille de ma page pour l'adapter. Le problème venait de ma bannière, Photoshop a fait des siennes, je l'ai réenregistrer et ça fonctionne

Merci encore pour votre aide!