Problème de script : image survolée + responsive

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Problème de script : image survolée + responsive

    Bonjour à tous,
    J'ai créé un module de contenu personnalisé dans lequel j'aimerai qu'en tête au dessus du texte apparaisse une image résponsive qui change d'aspect au survol et qui mène vers un lien quand on clique dessus.
    Je travaille avec l'éditeurs JCE sur joomla 3.3 et ja purity 3 et je n'y arrive pas.
    voici mon script :

    <p><a href="https://www.lien interne menant à un article joomla"> <img class="img-responsive" onmouseover="this.src='/images/joomlart/corporate/chamonix.jpg';" onmouseout="this.src='/images/joomlart/corporate/cachalot.jpg';" src="/images/joomlart/corporate/cachalot.jpg" alt="Sample image" /></a></p>
    <h3><span style="color: #808080;">Titre de mon texte<br /></span></h3>
    <p style="text-align: justify;">Lorem ipsum uizryre feizaa zeifia&nbsp; ficiaoe ajcia&nbsp; ufpaufico aejpcfzaiof ...</p>


    L'image n'apparaît pas et rien ne se passe au survol de la zone.
    J'ai juste le texte.
    Quelqu'un pourrait-il me dire la ou les erreurs que j'ai faites en écrivant ce code ?

    Merci d'avance

  • #2
    Re : Problème de script : image survolée + responsive

    Bon aller, je m'auto-répond.
    Le script ci-dessus ayant été créé avec dreamweaver faisait appel à des classes que je n'avais pas intégré sur mon site joomla.
    Forcément cela ne pouvait pas marcher. Du coup, j'ai trouvé une solution beaucoup plus simple pour réaliser mes images survolées en responsive avec l'éditeur de texte JCE.
    Il suffit d'utiliser le gestionnaire d'image qu'il propose avec l'onglet rollover, d'adjoindre un lien àl'image et de la déclarer comme responsive dans les paramètres avancés du gestionnaire d'imagede JCE.
    Bilan, cela donne un script de ce genre :
    <p><a title="votre titre" href="http://www.forum.joomla.fr/" target="_blank"><img class="img-responsive" onmouseover="this.src='image_au_survol_de_la_souri s.jpg';" onmouseout="this.src='image_non_survolee .jpg';" src="image_non_survolee" alt="Sample image" /></a></p>


    Il fonctionne à merveille. Il donne une image responsive, qui change au survol, et qui, au clic, conduit vers un lien externe ouvert dans une nouvelle fenêtre de votre navigateur (pour l'exemple, je vous ai mis un lien qui mène sur ce site).
    Simple et efficace comme solution.
    J'espère que cela en dépannera d'autres ?

    Du coup, je passe ce poste en réglé
    Dernière édition par algrand001 à 11/11/2014, 11h44

    Commentaire

    Annonce

    Réduire
    Aucune annonce pour le moment.

    Partenaire de l'association

    Réduire

    Hébergeur Web PlanetHoster
    Travaille ...
    X