Résolu Endroits cliquables dans une image

    Publicités

Users Who Are Viewing This Thread (Total: 0, Members: 0, Guests: 0)

Status
Not open for further replies.

SonGoku

Je suis Légendaire
V
Ancien staff
Mar 27, 2011
6,131
75
954
Alpha
Bonjour à tous !

Je viens aujourd'hui demander de l'aide, car je n'arrive pas à faire quelque chose, qui est certainement très facile à faire.

Pour vous expliquer un petit peu, j'utilise " MailChimp " pour envoyer des e-mails à des clients.

Dans MailChimp j'ai la possibilité de faire ceci :


1462277273-testmailchimp.png

Je me suis donc dis, je vais créer une image sous Photoshop, utiliser l'outil tranche afin de sélectionner des endroits cliquables.

Exemple :

Cliquer sur " Site internet " pour aller sur la home du site internet,
Cliquer sur " Promotions " pour aller sur la page promotions... ( vous avez compris )

1462277406-testcg3.png

Cependant, après en avoir parlé avec @vince, il semblerait que l'outil tranche de Photoshop ne soit pas adapté avec ce que je voudrais faire. ( merci pour ton aide ;) )

Quelqu'un aurait une idée pour moi? Sous Photoshop ou autre d'ailleurs !
Merci à vous !

SonGoku
 

Evaelis

La Voix de la Sagesse
V
Ancien staff
Apr 28, 2010
22,949
468
1,699
Valhalla
Une fois que tu as utilise l'outil tranche, tu obtiens plusieurs images.
Disons :
imageSite
imagePromo
imageFooter (plus d'informations)

Je suppose que MailChimp t'autorise le HTML dans tes messages si tu y insères des images. Tu as donc simplement :
imageSite
imagePromo
imageFooter
Ce que tu veux c'est rajouter un lien sur une des images :
imageSite
<a href="...">imagePromo</a>
imageFooter

 

SonGoku

Je suis Légendaire
V
Ancien staff
Mar 27, 2011
6,131
75
954
Alpha
Une fois que tu as utilise l'outil tranche, tu obtiens plusieurs images.
Disons :
imageSite
imagePromo
imageFooter (plus d'informations)

Je suppose que MailChimp t'autorise le HTML dans tes messages si tu y insères des images. Tu as donc simplement :

Ce que tu veux c'est rajouter un lien sur une des images :



Effectivement, merci Eva, je vais essayer, j'espère qu'il n'y a pas d'espace entre les images, sinon ça ne va pas bien rendre.

Du coup avec l'outil tranche, je vais devoir sélectionner la totalité de la largeur de l'image.

J'essaie !
 

Aznelh

V
Ancien staff
Feb 26, 2015
2,857
788
839
France
Tu crées ton image sur ps ensuite tu la tranche et tu insères les liens directement avec l'outil.

Puis une fois que tout est terminé tu fais Fichier > Exportation > Enregistrer pour le web (hérité)
Je te conseille de ne pas toucher aux réglages , ensuite il te reste plus qu'à enregistrer.
Pour l’enregistrement pense à mettre le format "html et images"

Ensuite tu obtiendras un code html il te restera plus qu'à l'utiliser sur ton site ^^.
Par exemple regarde cette image :
QZLlaUB.png

L'objet 1 mène vers l’accueil du forum et l'objet 2 vers ce post.

Voilà les tranches de l'image :
m1NAE8F.gif



ime1rJy.gif



ZvE5WUx.gif



cJGWmuV.gif



CZYKnOz.gif



glZslXr.gif
Voilà le code html obtenu avec photoshop pour cette image :
HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices () -->
<table id="Tableau_01" width="200" height="200" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="2">
			<img src="images/Test_01.gif" width="200" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<a href="http://www.cheat-gam3.com/index.php">
				<img src="images/Tr_1.gif" width="200" height="50" border="0" alt=""></a></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/Test_03.gif" width="200" height="44" alt=""></td>
	</tr>
	<tr>
		<td>
			<a href="http://www.cheat-gam3.com/showthread.php?t=180012">
				<img src="images/Tr_2.gif" width="199" height="50" border="0" alt=""></a></td>
		<td rowspan="2">
			<img src="images/Test_05.gif" width="1" height="80" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Test_06.gif" width="199" height="30" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

J'espère t'avoir aidé :)
 

SonGoku

Je suis Légendaire
V
Ancien staff
Mar 27, 2011
6,131
75
954
Alpha
Bonjour !

Merci pour vos réponses, du coup j'ai réussi, tout bêtement comme m'a expliqué Evaelis.
Il n'y a aucun espace visible entre les images donc c'est plutôt cool.

A la prochaine !

SonGoku


#lock #modo
 
Status
Not open for further replies.