Mettre une image cliquable sur un background wordpress
asavoir
-
11 févr. 2013 à 09:41
Noviceman Messages postés 222 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 2 mars 2016 - 12 févr. 2013 à 21:21
Noviceman Messages postés 222 Date d'inscription mercredi 4 août 2010 Statut Membre Dernière intervention 2 mars 2016 - 12 févr. 2013 à 21:21
A voir également:
- Wordpress image cliquable
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Image iso windows 10 - Guide
- Légender une image - Guide
- Sommaire cliquable word - Guide
3 réponses
Noviceman
Messages postés
222
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
2 mars 2016
7
11 févr. 2013 à 10:54
11 févr. 2013 à 10:54
Bonjour,
visiblement c'est un template adapté à la base à ce type de présentations.
Sur un autre template j' aurais mis un index à la racine du serveur (servant d'index principal pour l'accueil) et mon wordpress dans un dossier.
Dans l'index à la racine ma déco et mon image cliquable :
<a href="mon-dossier-wordpress/"><img src="mon-image-cliquable.jpg" /></a>...
Pour l'autre partie de ton lien, c'est un système "d'ancres html" qui envoi au clic à un article de la page.
à l'envoi vers l'article visé :
<a href="#titre-article">texte ou image</a>
à la réception à l'endroit voulu sur la page
<a name="titre-article"><b>Titre de mon article ou image</b></a>
Voila, en espérrant avoir compris ta demande.
(Tu auras aussi sûrement d'autres réponses, car pour la première partie, je pense que tu peux faire autrement sans créer le dossier wordpress en te servant directement de l'index worpress.)
visiblement c'est un template adapté à la base à ce type de présentations.
Sur un autre template j' aurais mis un index à la racine du serveur (servant d'index principal pour l'accueil) et mon wordpress dans un dossier.
Dans l'index à la racine ma déco et mon image cliquable :
<a href="mon-dossier-wordpress/"><img src="mon-image-cliquable.jpg" /></a>...
Pour l'autre partie de ton lien, c'est un système "d'ancres html" qui envoi au clic à un article de la page.
à l'envoi vers l'article visé :
<a href="#titre-article">texte ou image</a>
à la réception à l'endroit voulu sur la page
<a name="titre-article"><b>Titre de mon article ou image</b></a>
Voila, en espérrant avoir compris ta demande.
(Tu auras aussi sûrement d'autres réponses, car pour la première partie, je pense que tu peux faire autrement sans créer le dossier wordpress en te servant directement de l'index worpress.)
Bonjour,
Merci pour la réponse rapide, comme je suis novice je te cache pas que j'ai pas tout capté.
Ce que je cherche à faire c'est
- Un thème avec seulement un background personnalisé
- Une image au dessus avec des zones cliquables, dont chacune qui envoi vers une page, pas forcément dans le même site.
C'est plus facile de le dire pour le moment :-)
Cordialement
Merci pour la réponse rapide, comme je suis novice je te cache pas que j'ai pas tout capté.
Ce que je cherche à faire c'est
- Un thème avec seulement un background personnalisé
- Une image au dessus avec des zones cliquables, dont chacune qui envoi vers une page, pas forcément dans le même site.
C'est plus facile de le dire pour le moment :-)
Cordialement
Noviceman
Messages postés
222
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
2 mars 2016
7
12 févr. 2013 à 20:16
12 févr. 2013 à 20:16
Pour l'instant je te propose un html 1.0 strict et le plus simple des shéma :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title="mon titre de page"</title>
<meta name="Description" content="P description de l'activité" />
<meta name="Keywords" content="ici je met mes mots clés invisible à l'internaute mais utile à google ou autres moteurs en placant une virgule entre chaque mot-clé mon sujet, mon département, ma ville, mon activité, mes produits, etc" />
<meta http-equiv="Content-Language" content="de, fr, it" />
< style type="text/css">
#image-clic
{
width:600px;
height:500px; ///(commentaire à enlever) tu dois ici mettre le nombre de pixels de ton image, ici exemple carré 500px x 500px
margin-left:auto;
margin-right:auto;
margin-top:300px; ///(commentaire à enlever) tu dois ici mettre la marge en pixels que tu souhaite avoir au niveau du haut de la fenêtre...ici 300px...
}
</style>
</head>
<body style="background-image:url('image-de-fond.png');">
<div id="image-clic"><a href="mon-lien-vers-ma-page2"><img src="mon-image-cliquable.jpg" /></a>
</body>
</html>
Les extentions sur mon exemple ici : .png et .jpg seront à changer ou pas selon les extentions de tes images;..
A+++
Ecris si ça va pas j'ai fait ça à la vollée, y' a peut être une erreur (non testé)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title="mon titre de page"</title>
<meta name="Description" content="P description de l'activité" />
<meta name="Keywords" content="ici je met mes mots clés invisible à l'internaute mais utile à google ou autres moteurs en placant une virgule entre chaque mot-clé mon sujet, mon département, ma ville, mon activité, mes produits, etc" />
<meta http-equiv="Content-Language" content="de, fr, it" />
< style type="text/css">
#image-clic
{
width:600px;
height:500px; ///(commentaire à enlever) tu dois ici mettre le nombre de pixels de ton image, ici exemple carré 500px x 500px
margin-left:auto;
margin-right:auto;
margin-top:300px; ///(commentaire à enlever) tu dois ici mettre la marge en pixels que tu souhaite avoir au niveau du haut de la fenêtre...ici 300px...
}
</style>
</head>
<body style="background-image:url('image-de-fond.png');">
<div id="image-clic"><a href="mon-lien-vers-ma-page2"><img src="mon-image-cliquable.jpg" /></a>
</body>
</html>
Les extentions sur mon exemple ici : .png et .jpg seront à changer ou pas selon les extentions de tes images;..
A+++
Ecris si ça va pas j'ai fait ça à la vollée, y' a peut être une erreur (non testé)
Noviceman
Messages postés
222
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
2 mars 2016
7
Modifié par Noviceman le 12/02/2013 à 22:16
Modifié par Noviceman le 12/02/2013 à 22:16
Appels un fichier blocnote windows et renome le index.html et colles le code donné dedans.
NOTES
J'ai oublié de fermer la <div> à cette ligne et oublié "alt", fais plutôt ça à cet endroit :
idem en haut de page il faut fermer la balise "title", j'me suis planté (fatigue, lol) à écrire comme ça :
Attention il est possible que ton pc n'affiche pas les extentions. Dans ce cas il faut aller dans "option des dossier" (mes documents, "outils") sous windows et décocher "masquer les extentions dont le type est connu".
Ne pas mettre d'images trop trop lourdes sur ton site.
Pour la travailler et redimenssionner gratuitement tes images, télécharges "photofiltre" et à partir de ce logiciel, en enregistrant en jpg ou JPEG quand tu feras appercu sur la fenêtre de dialogue d'enregistrement tu y verras le poid et sa qualité visuelle.
Pou redimenssionner l'image avec "photofiltre" c'est "menu du haut=>image>>taille de l'image"...
Attention, wordpress possède un index html ou php qui sera la premiere page. C'est pourquoi il faut installer ton wordpress dans un dossier du nom voulu à la racine pour que ton image cliquable soit visible en premier sur ton site. Donc le code de l'image cliquable (index.html) est a la racine et le wordpress dans un dossier à la racine du site
Dans ce cas le lien sera sera :
Pas facile à expliquer tout ça, LoL : - )
----J'ai relu ton dernier post---->
Pour faire une image a plusieurs clics envoyants vers divers sites ou pages, il faut que tu coupes ton image en 4 pour 4 liens, la réunir en 4 <div> côtes à côtes et que tu fasses le lien donné ici à chaque fois pour chaque partie d'image (y'a un petit boulot de css pour les <div>), je vois que ça, sinon php ou js... C'est le même code mais à 4 <div> et css.
NOTES
J'ai oublié de fermer la <div> à cette ligne et oublié "alt", fais plutôt ça à cet endroit :
<div id="image-clic"><a href="mon-lien-vers-ma-page2"><img src="mon-image-cliquable.jpg" alt="mon commentaire sur l'image" /></a></div>
idem en haut de page il faut fermer la balise "title", j'me suis planté (fatigue, lol) à écrire comme ça :
<head> <title>mon titre de page"</title>
Attention il est possible que ton pc n'affiche pas les extentions. Dans ce cas il faut aller dans "option des dossier" (mes documents, "outils") sous windows et décocher "masquer les extentions dont le type est connu".
Ne pas mettre d'images trop trop lourdes sur ton site.
Pour la travailler et redimenssionner gratuitement tes images, télécharges "photofiltre" et à partir de ce logiciel, en enregistrant en jpg ou JPEG quand tu feras appercu sur la fenêtre de dialogue d'enregistrement tu y verras le poid et sa qualité visuelle.
Pou redimenssionner l'image avec "photofiltre" c'est "menu du haut=>image>>taille de l'image"...
Attention, wordpress possède un index html ou php qui sera la premiere page. C'est pourquoi il faut installer ton wordpress dans un dossier du nom voulu à la racine pour que ton image cliquable soit visible en premier sur ton site. Donc le code de l'image cliquable (index.html) est a la racine et le wordpress dans un dossier à la racine du site
Dans ce cas le lien sera sera :
<div id="image-clic"><a href="mon-du-dossier-wordpress"><img src="mon-image-cliquable.jpg" alt="mon commentaire sur l'image" /></a></div>
Pas facile à expliquer tout ça, LoL : - )
----J'ai relu ton dernier post---->
Pour faire une image a plusieurs clics envoyants vers divers sites ou pages, il faut que tu coupes ton image en 4 pour 4 liens, la réunir en 4 <div> côtes à côtes et que tu fasses le lien donné ici à chaque fois pour chaque partie d'image (y'a un petit boulot de css pour les <div>), je vois que ça, sinon php ou js... C'est le même code mais à 4 <div> et css.
11 févr. 2013 à 11:01
Merci pour la rapidité, comme je suis novice je te cache pas que j'ai pas tout capté.
Ce que je cherche à faire c'est
- Un thème avec seulement un background personnalisé
- Une image au dessus avec des zones cliquables, dont chacune qui envoi vers une page, pas forcément dans le même site.
C'est plus facile de le dire pour le moment :-)
Cordialement