Aller au contenu

|Resolu] HTML liens vers zones de l image

kiliking

Par kiliking
dans Programmation et Lignes de code

Messages recommandés

kiliking Contributeur

kiliking

Posté(e)
Posté(e)

Bonjour à tous,

Voici mon petit souci. J aimerai savoir s il est possible en HTML, de creer le contraire de ce que l on appelle les zones d une image cliquable. Donc en fait, cliquer sur un lien pour nous amener à un endroit precis d une grande image.

Est ce donc possible en HTML ou non et comment le faire ? Sinon avec quelles autres methodes pourrait on le faire ?

Merci de vos reponses :francais:

Lien vers le commentaire
Partager sur d’autres sites
crocodudule Collaborateur

crocodudule

Posté(e)
Posté(e)

On peut peut-être imaginer de faire un tableau transparent de la taille de l'image et avec un nombre important de cellules. Placer dans chaque cellule une ancre invisible et afficher en fond du tableau l'image.

Chaque cellule te donne donc une position en x/y dans l'image.

A l'aide de chaque ancre tu peux t'assurer qu'est visible la portion d'image correspondant à la zone définie par la cellule.

Via le CSS tu peux même faire apparaître un cadre autour de la portion sélectionnée.

C'est un peu du bricolage mais ça doit fonctionner.

Lien vers le commentaire
Partager sur d’autres sites
Shtong Régulier

Shtong

Posté(e)
Posté(e)

Oui éventuellement si tu n'as pas trop d'images à traiter comme ça ;)

Sinon oui en JS c'est pas forcément trivial, d'autant que le sujet du positionnement des éléments est un sujet sensible pour ce qui est de la compatibilité entre les différents navigateurs (tu peux utiliser une lib javascript pour te faciliter le travail).

Grosso modo je verrai les choses comme ça :

Tu repères pour chaque lien les coordonnées X/Y de l'endroit où tu veux aller dans l'image

Tu fais une fonction javascript qui fait scroller l'utilisateur vers une position déterminée par paramètres dans une image (position de l'image dans la page + position voulue dans l'image)

Ensuite tu fais tes liens et pour chaque lien tu appelle ta fonction avec la position voulue.

Alors bien sûr c'est très shématisé :craint:, et ça ne sera pas de la tarte si tu n'as jamais fait de javascript...

Trouver la position d'un élément dans la page

La fonction scrollBy pour faire scroller la page

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)

Bon alors la suite,

j ai applique la methode à shtong (desole crocodudule) lol

Avec un script tout simple à savoir :

<head>

<script type="text/javascript">

function jumpScroll1() {

window.scroll(1000,1000);

}

function jumpScroll2() {

window.scroll(2000,2000);

}

</script>

</head>

<body>

<a href="java script:jumpScroll1()">ici</a>

<a href="java script:jumpScroll2()">ici2</a>

</body>

Sauf que maintenant j aimerai localiser l endroit avec par exemple une croix. Une idee ?

Lien vers le commentaire
Partager sur d’autres sites
Shtong Régulier

Shtong

Posté(e)
Posté(e)

Oui enfin moi je pensais à un truc plus compliqué ;), notamment qui fonctionne en fonction de la position de l'image dans la page car dans ton truc si tu bouge l'image (ou si l'utilisateur augmente la taille de la police par exemple) tu est bon pour recalculer toutes les positions)

Un truc du genre :

<head>
<script type="text/javascript">
function jumpToImage(x, y) {
	var posImage = calculePositionImage();
  	window.scroll(x + posImage.x, y + posImage.y);
}

function jumpToImage() {
 // ...
}

</script>
</head>

<body>  
<a href="java script:jumpToImage(1000, 1000)">ici</a>
<a href="java script:jumpToImage(2000, 2000)">ici2</a>

</body>

Pour positionner une croix la technique est de :

- Placer la grande image (seule) dans un conteneur

- Dans ce conteneur placer l'image de croix en positionnement absolu

- Jouer avec les propriétés margin-left et margin-top pour déplacer la croix

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)

Alors ok pour la positionnement de la croix. voila mon code pour tester.

<html>

<head>

<script type="text/javascript">

function jumpScroll1() {

window.scroll(1000,1000);

}

function jumpScroll2() {

window.scroll(2000,2000);

}

</script>

</head>

<body style="margin:0; paddin:0;">

<div style="background-image:url(1.jpg); background-repeat : no-repeat; width:574px; height:470px; position:absolute;">

<div style="margin-left:50px; margin-top:50px; width:86px; height:153px;">

<img src="fleche.jpg" WIDTH=86 HEIGHT=153>

</div>

</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="java script:jumpScroll1()">ici</a>

<a href="java script:jumpScroll2()">ici2</a>

</body>

</html>

Edit : Attention au mot "javascript" qui s ecrit tout attache. Ici je n arrive pas à le coller <a href="java script:jumpScroll1()">ici</a>

Mais comment fais tu pour changer les positions des differents elements dans margin-left et margin-top ?

Desole suis pas tres fort en javascript

Lien vers le commentaire
Partager sur d’autres sites
Shtong Régulier

Shtong

Posté(e)
Posté(e)

Houlala ! Tu as de la chance que je ne sois pas un intégriste de la norme HTML parce que là... Tu t'expose à un incendiage en règle avec du code comme ça :transpi:

Tu ferais quand même mieux de regarder des tutos de HTML / XHTML strict, ton code n'en serait que plus lisible et compatible avec plus de navigateurs :eeek2:

Bon sinon pour modifier le style d'un élément en javascript c'est monElement.style.marginLeft = "12px"; (TOUJOURS mettre les unités, en ajoutant "px" au résultat de ton calcul si besoin).

Lien vers le commentaire
Partager sur d’autres sites
Conan28 Passionné

Conan28

Posté(e)
Posté(e)

Il y a il me semble une balise map qui permet de faire des choses assez étonnantes, j'ai déjà vu des sites l'utiliser, ça permet d'encercler une zone d'une image puis de faire des choses genre changer de page (et faire une ancre)

Si j'ai bien compris le concept, je n'en sais pas plus mais je pense que des recherche permettrons de faire avancer le truc

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)
Il y a il me semble une balise map qui permet de faire des choses assez étonnantes, j'ai déjà vu des sites l'utiliser, ça permet d'encercler une zone d'une image puis de faire des choses genre changer de page (et faire une ancre)

Si j'ai bien compris le concept, je n'en sais pas plus mais je pense que des recherche permettrons de faire avancer le truc

Oui la balise map je connais mais c est le contraire que je veux faire. D un lien vers une zone precise et non pas l inverse realisable avec la balise "map"

Sinon Shtong oui je sais c est codé avec les pieds mais c est pas grave. J essai de faire ce que je veux puis apres j arrange mon code. Desole si ca t as choque :p

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)

Ca y est j ai reussi. Voici mon code :

<html>

<body style="margin:0 ; paddin:0 ;">

<a href="#" onclick="fleche.style.marginLeft = '450px';fleche.style.marginTop = '450px'">ici</a>

<a href="#" onclick="fleche.style.marginLeft = '250px';fleche.style.marginTop = '250px'">ici2</a>

<div style="background-image:url(1.jpg) ; background-repeat : no-repeat ; width:1524px ; height:868px ; position:absolute;">

<div id="fleche" style="margin-left:150px ; margin-top:50px ; width:86px ; height:153px ;">

<img src="fleche.jpg" WIDTH=86 HEIGHT=153>

</div>

</div>

</body>

</html>

J ai fais du menage en virant les fonctions du debut :transpi:

En tout cas je te remercie Shtong pour ton aide :p . Tout marche impeccable. Qu en pensez vous Shtong, Conan28 et les autres ?

Mais tu n'as qu'a faire une ancre/un onclick (ou alors je suis un boulet)

Ben ca marche pas apparement avec les ancres sur des zones de l image

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)
Alors <map coords="&É,(U'"HUNJKD,FGD" onclick="recalerScroll(pxx,pxy);"></map>

Pas testé

Heu j attends l avis de Shtong parce que j avais pas pense à le faire comme ca :censored:

Sinon heu j ai crie victoire un peu trop vite car j ai efface la fonction scroll du debut. Du coup la fleche se deplace bien à l endroit voulu mais pas l image. Et etant donne que l image est assez grande faut mainteanant rechercher la fleche :chinois:

La suite demain. Bonne nuit et merci Conan28 de t interesser au sujet :mdr:

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)

Et voila

<html>
<head>
<script type="text/javascript">
function jumpScroll1() {
window.scroll(700,1000);
}
</script>
</head>
<body style="margin:0; paddin:0;"> 
<a href="java script:jumpScroll1()" onclick="fleche.style.marginLeft  = '1450px';fleche.style.marginTop  = '1450px'">ici</a>
<div style="background-image:url(image.jpg); background-repeat : no-repeat; width:3000px; height:3700px; position:absolute;">
<div id="fleche" style="margin-left:150px; margin-top:50px; width:86px; height:153px;">
<img src="fleche.jpg" WIDTH=86 HEIGHT=153>
</div>
</div>
</body>
</html>

La fleche se deplace et l image aussi. Je crois que je suis bon enfin presque car maintenant pour le finale je dois l implanter dans une frame. J y suis presque :francais:

Edit : Attention au mot "javascript" qui s ecrit tout attache. Ici je n arrive pas à le coller <a href="java script:jumpScroll1()" ... > du coup ca marche pas.

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)

Et voila pour les frames (nommees gauche et droite) pour ceux que ca interresse :

<a href="java script:jumpScroll1()" target="gauche"; onclick="parent.frames.gauche.fleche.style.marginLeft  = '1450px'; parent.frames.gauche.fleche.style.marginTop  = '1450px'">ici</a>

Avec toujours ce "javascript" qui s ecrit tout attache. Ici je n arrive pas à le coller <a href="java script:jumpScroll1()" ... > du coup ca marche pas.

Bon je crois que tout est ok. Je laisse le sujet en non resolu au cas ou j aurai d autres soucis :transpi:

Merci à tous quand meme :francais:

Lien vers le commentaire
Partager sur d’autres sites
Shtong Régulier

Shtong

Posté(e)
Posté(e)

Tant mieux si ça fonctionne :transpi:

Maintenant si tu es interessé dans l'amélioration de ton appli (ou même sans :francais:) je te conseille vivement d'essayer de regarder ce que tu peux faire pour rendre ton code plus "moderne" :

- Utiliser d'éviter les frames et essayer de se rapprocher du "XHTML Valid"

- Privilégier l'utilisation des CSS aux attributs "style=..."

- Avoir un javascript plus propre (par exemple tu n'est pas sensé pouvoir la variable fleche sans l'avoir déclarée et initialisée avec document.getelementById)

Lien vers le commentaire
Partager sur d’autres sites
kiliking Contributeur

kiliking

Posté(e)
  • Auteur
Posté(e)
Tant mieux si ça fonctionne :craint:

Maintenant si tu es interessé dans l'amélioration de ton appli (ou même sans :craint:) je te conseille vivement d'essayer de regarder ce que tu peux faire pour rendre ton code plus "moderne" :

- Utiliser d'éviter les frames et essayer de se rapprocher du "XHTML Valid"

- Privilégier l'utilisation des CSS aux attributs "style=..."

- Avoir un javascript plus propre (par exemple tu n'est pas sensé pouvoir la variable fleche sans l'avoir déclarée et initialisée avec document.getelementById)

Oui t inquietes pas je vais nettoyer mon code maintenant :craint:

Il est déconseiller de faire <a href="java script:blabla"></a>

Mieux vaut faire <a href="#" onclick="fonction(); return false;"></a>

Sinon, pourquoi au lieu de faire jumpScroll1() tu fais pas directement dans le onclick window.scroll(700,1000) ?

Merci c est ce que j ai fait. Ca donne donc :

<a onclick="parent.frames.gauche.window.scroll(650,1700); parent.frames.gauche.fleche.style.marginLeft = '1100px'; parent.frames.gauche.fleche.style.marginTop = '2100px'; return false;">

:craint:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...