Création d'image avec contenu interactif.
matiasatch
-
matiasach -
matiasach -
Bonjour,
Je cherche à améliorer mon site google. A partir d'une image Jpeg je souhaite y ajouter des contenus interactifs : photos miniatures qui apparaissent quand la souris survole les zones concernées. J'ai essayé de le faire avec Thinglink mais le code HTML ne fonctionne pas. Avez-vous d'autres idées ? Merci pour vos réponses.
Je cherche à améliorer mon site google. A partir d'une image Jpeg je souhaite y ajouter des contenus interactifs : photos miniatures qui apparaissent quand la souris survole les zones concernées. J'ai essayé de le faire avec Thinglink mais le code HTML ne fonctionne pas. Avez-vous d'autres idées ? Merci pour vos réponses.
A voir également:
- Création d'image avec contenu interactif.
- Creation compte gmail - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide
- Image iso - Guide
7 réponses
Bonsoir il vous faut du javascript, si vous voulez que des image apparaissent lorsque vous passez la souris dans une partie de votre site.Sur quelle partie?du texte? des autres images?
Bonsoir,
Sur une page internet j'ai un plan de jardin dessiné à la main et numérisé sous format Jpeg. Je voudrais donc que les photos apparaissent en cliquant ou en passant la souris sur certains points (ou zones) du plan.
Sur une page internet j'ai un plan de jardin dessiné à la main et numérisé sous format Jpeg. Je voudrais donc que les photos apparaissent en cliquant ou en passant la souris sur certains points (ou zones) du plan.
Bonsoir c est possible si vous mettez l'image a survoler en background-image.
j'ai fait un exemple avec une image que j'avais qui s'appelle HORREUR.png et qui va se faire survoler par la souris. J'ai créer deux point que j'ai mi aléatoirement sur l'image d'une surface de 20*20px chacun. bien sur tout sa on peu le changer.
Les deux image qui apparaisse s'appelle image1.jpg et image2.jpg
voici le code
j'ai fait un exemple avec une image que j'avais qui s'appelle HORREUR.png et qui va se faire survoler par la souris. J'ai créer deux point que j'ai mi aléatoirement sur l'image d'une surface de 20*20px chacun. bien sur tout sa on peu le changer.
Les deux image qui apparaisse s'appelle image1.jpg et image2.jpg
voici le code
<!DOCTYPE html>
<html>
<head>
<title>mot de passe</title>
<meta charset="UTF-8" />
<style type="text/css">
body {
position: relative;
background-image: url(HORREUR.png);
}
#bloc1 {
position: absolute;
top: 30px;
left: 30px;
width: 20px;
height: 20px;
}
#bloc2 {
position: absolute;
top: 50px;
left: 50px;
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<span id="bloc1"> </span>
<span id="bloc2"> </span>
<script type="text/javascript">
var img_1 = document.getElementById("bloc1");
var img_2 = document.getElementById("bloc2");
var img1 = document.createElement("img");
var img2 = document.createElement("img");
img1.src = "image1.jpg";
img2.src = "image2.jpg";
img1.alt = "ma premiere image";
img2.alt = "ma deuxieme image";
img_1.addEventListener("mouseover", function() {
img_1.appendChild(img1);
}, false);
img_2.addEventListener("mouseover", function() {
img_2.appendChild(img2);
}, false);
img_1.addEventListener("mouseout", function() {
img1.parentNode.removeChild(img1);
}, false);
img_2.addEventListener("mouseout", function() {
img2.parentNode.removeChild(img2);
}, false);
</script>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci beaucoup. Je vous avoue que je n'ai jamais fait de code HTML et c'est un peu du chinois pour moi. Pourriez me donner plus de précisions ou m'indiquer un lien internet pour y voir plus clair. Le plan dont je parlais est ici https://sites.google.com/site/lesjardinsdekerlouis/plan-du-jardin
re
Oula avec google site cela va être dur car c est plein de javascipt généré par ordinateur, les pages qui devait être d'une simplicité déconcertante, sont très complexe.
Je connais pas le fonctionnement de google site, commet on accède au code....moi j'ai toujour fait mes sites à la main.Et je pense que le mieux serais de faire ça. Deux semaine d'étude et une semaine de conception grace au site du zero, où la tout est explique de façon simple.Html et css c'est simple.
je vous donne l'adresse : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Modifier votre site sur google site sans connaitre bien la programmation est très dur
Modifier un site que l'on a fait soi me est plaisant et facile
Oula avec google site cela va être dur car c est plein de javascipt généré par ordinateur, les pages qui devait être d'une simplicité déconcertante, sont très complexe.
Je connais pas le fonctionnement de google site, commet on accède au code....moi j'ai toujour fait mes sites à la main.Et je pense que le mieux serais de faire ça. Deux semaine d'étude et une semaine de conception grace au site du zero, où la tout est explique de façon simple.Html et css c'est simple.
je vous donne l'adresse : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
Modifier votre site sur google site sans connaitre bien la programmation est très dur
Modifier un site que l'on a fait soi me est plaisant et facile