Fonction OnMouse

Fermé
Pino760 Messages postés 3 Date d'inscription mercredi 3 août 2022 Statut Membre Dernière intervention 5 août 2022 - 4 août 2022 à 14:32
Pino760 Messages postés 3 Date d'inscription mercredi 3 août 2022 Statut Membre Dernière intervention 5 août 2022 - 5 août 2022 à 22:32

Bonjour, et merci de l'accueil.

J'essai a tout prix de obtenir un résultat sur un exemple de script mais impossible, mes connaissances sont trop limitées.

Voila, dans une image j'ai crée une zone cliquable avec Gimps, et j'ai ajouté moi meme le script pour la 

fonction OnMouseOver pour afficher une deuxième image au passage. cette dernière est une sorte de menu.

Mettre un lien sur un point precis, ça j arrive a le faire, par contre si je veux avoir plusieurs zones cliquables dans cette dernière image, il m'est impossible. Pour rendre mon idée plus claire j'ai réalise un exemple en experant que ca fonctionne. Toute suggestion serait la bien venue.

Merci d'avance. Pino       http://www.arkadias.fr/exemple.html


Windows / Chrome 103.0.0.0

A voir également:

3 réponses

Salut,

en HTML il existe la balise MAP qui permet de définir des zones avec leurs coordonnées.

Exemple: https://www.w3schools.com/tags/tag_map.asp

Toujours sans programmation vous pouvez ajouter une pseudo class hover en CSS.

Avec la programmation(JS) le mieux c'est d'utiliser addEventListener

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

"mes connaissances sont trop limitées."

Dans ce cas une solution efficace, la seule, vous utilisez le truc entre vos deux oreilles et vous apprenez en commençant par les bases du langage/technologie visée.

0
Pino760 Messages postés 3 Date d'inscription mercredi 3 août 2022 Statut Membre Dernière intervention 5 août 2022
5 août 2022 à 16:36

Merci de votre réponse, ne connaissant pas  la programmation , j'essai de me débrouiller comme on peu. Ce qu'il y a entre mes oreilles  doit être alimenté par une connaissance spécifique que je ne possède pas. Concernant le Map je connais  déjà et je vous montre ce que je fais avec, simple mais intéressant  http://www.arkadias.fr/exemple.html. Comme déjà expliqué dans ma question, mon problème  est n'est pas de réaliser un Map mais de rendre active  une image appelée par OnMouse..., Un liens dans une image appelée.. j'ai  essayé avec "this.src...." apres  OnMouseOver mais ça ne fonctionne pas..

En tout cas merci de vos conseils et surtout de votre réponse. 

0

C'est pas de la magie mais un savoir...et comme tout ça s'apprend...

"ne connaissant pas  la programmation , j'essai de me débrouiller comme on peu."

Je ne sait pas ce que c'est se débrouiller mais comme je l'ai déjà expliqué vous n'avez pas besoin de programmation pour faire ce que vous voulez puisque HTML et CSS suffisent pour changer un comportement au survol et faire un lien.

onmouseover vous laissez tomber c'est nul, ça veut rien dire et une mauvaise façon de faire au mieux, je vous ai mis la bonne façon de faire.

Mais pour comprendre celle ci il faut comprendre comment marche le langage JavaScript.

Donc seule solution vous vous sortez les doigts et vous taper "apprendre JavaScript" dans Google ou alors vous laissez tomber car ce ne sera pas compréhensible pour vous.

Imaginez une personne qui veut fabriquer une voiture mais n'a jamais entendu parler d'un moteur ou de ce qu'est une roue , un engrenage etc... bin non c'est pas pas de la débrouille c'est de la technologie et c'est exactement votre situation ici.

Soit vous apprenez soit vous renoncezz et payez quelqu'un qui a eu le temps et la patience d'apprendre les technologies... pas d'autres choix surtout pas la débrouille sans savoir de quoi vous parlez.

ps: ici c'est un forum d'entraide pour les gens qui bosse pas pour faire le travail pour vous.

C'est simple et trivial et ne nécessite que quelques lignes comme l'exemple du addEventListener vous a montré mais avant tout il faut savoir ce que vous faites et pas imaginer savoir ;)

Alors bon travail ou bon renoncement selon que vous faites les efforts nécessaires ou pas.

-1

ps2: si la question est de mettre plusieurs liens cliquable l'exemple sans programmation avec MAP devrais suffire puisque c'est exactement cela qu'il fait.

Comme vous avez du mal à lire je remets ici:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

ps3: Gimp est un logiciel d'édition d'image(il crée des images et non des zones cliquables), par contre vous pouvez créer des zones cliquables avec le langage HTML.

Dans l'ensemble c'est une très mauvaise idée mais si certains logiciels d'édition d'images(Gimp, Photoshop) le permettent de leur demander de générer du HTML qui sera incompréhensible et jamais efficace et pertinent(bien écrit) car ils ne sont pas faits pour ça.

Donc éviter et utiliser n'importe quel éditeur de texte pour faire du texte, éventuellement un éditeur de code pour les aides à la saisie/visualisation.

Si vous voulez faire de la mauvaise manière il suffit (comme déjà dit) de regarder dans la doc technique du langage euh...technique : la programmation JavaScript; mon commentaire avait pour but de vous dire que vous pouvez chercher par vous même mais visiblement vous n'avez pas lu ou compris cela...

https://www.w3schools.com/jsref/event_onmouseover.asp

Cette façon de faire pose plusieurs problèmes:

_non séparation du code, celui ci est lié à un endroit spécifique de la page(la balise sur lequel il agit). En plus de rendre le programme peu clair et difficile à modifier il n'est simplement pas modulaire(réutilisable ailleurs)

_techniquement mauvais car une fonction anonyme ne peut être désactivé et qu'elle n'a pas tout les paramètres que propose un vrai écouteur d'événement. Traiter des résultats, la cible et l'événement en lui même peut donc se révéler plus complexe.

L'un dans l'autre vous avez un truc plus complexe, moins clair et avec moins de possibilité qui n'est pas réutilisable. voilà ce que j'entendais par c'est la mauvaise façon de faire. Les bonnes pratiques sont de séparer la partie programmation de la partie HTML pour pouvoir modifier l'un indépendamment de l'autre ou même réutiliser l'un ou l'autre, en fait c'est exactement le principe d'une fonction dont visiblement vous n'avez aucune notion et qui est la base dans tout les langages de programmation (peu ou prou) et surtout pour JavaScript que ce soit en programmation procédurale(une liste dans un ordre), objet(un regroupement par 'thèmes") ou fonctionnelle(par appel à des fonctions qui vont être reliées les unes aux autres).

0
Pino760 Messages postés 3 Date d'inscription mercredi 3 août 2022 Statut Membre Dernière intervention 5 août 2022
5 août 2022 à 22:32

Merci pour votre réponse et Vos conseils.  

Bonne soirée.

0