Image qui change au passage de la souris(rollover) [Résolu/Fermé]

Signaler
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
 -
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
 -
Bonjour à tous,

Après une aide formidable des forums, des "bidouillages" persos j'ai toujours réussis à mes fins quel qu'en soit la durée !
Cependant je planche sur un truc depuis 2 jours , je pense avoir trouvé la solution mais lorsque que je rentre ma ligne de commande dans mon fichier php pas moyen.. je penses que c'est dû à une erreur de synthase mais je trouves pas laquelle..

Je souhaiterais simplement remplacer un lien (d'une fonction) par un image: CA C'EST J'AI RÉUSSIS mais aussi avec une image qui change au passage de la souris sur celle-ci.
j'utilise "onmouseover onmousout"..., que j'ai trouvais sur le forum mais rien n'y fait je n'y arrive pas !

Pouvez-vous m'aider, merci d'avance
(je suis novice sur les forums je ne sais pas quelles indications vous donner) je préfères que vous me le demander :)

Merci d'avance
A voir également:

7 réponses

Réponse 1 / 7
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 338
Bonjour,

Pour faire ça il y a deux méthodes, une avec du CSS et une avec du Javascript (pas de PHP pour le rendu !) :
* La première en CSS, c'est de mettre un div de la taille de l'image, avec comme background la première image, et sur :hover en background la deuxième image. 
<div class="image_1">&nb sp; <!-- enlever l'espace entre nb et sp ! --></div>
<style type="text/css">
<!--
.image_1 {
width: 100px;
height: 80px;
background: url(img/image_1_out.png);
}
.image_1:hover {
background: url(img/image_1_on.png);
}
//-->
</style>
* La deuxième en Javascript, c'est d'utiliser onmouseover et onmouseout. 
<img src="img/image_1_out.png" onmouseover="this.src='img/image_1_on.png'" onmouseout="this.src='img/image_1_out.png'" />

J'ai pas testé les deux codes, mais normalement ça devrait marcher, sauf pour le deuxième où je suis pas sûr du this.src='value', sinon c'est this.setAttribute('src','value').
___/\_canarder_/\___
Le Renard qui règne sur le WEB : Firefox
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 7
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
Merci pour votre réactivité, j'ai utilisais tout de suite votre deuxième solution bcp plus facile pour moi cependant :

quand je fais un copié/coller de votre ligne, pas de soucis je renseigne au fur et à mesure les liens des images mais à la fin j'ai une erreur de syntaxe (j arrive pas à ferme la balise ou la ligne) tout bêtement c'est grotesque..

Réponse 3 / 7
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
je vais tester maintenant votre deuxième solution au cous ou..
Réponse 4 / 7
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
Je vous remercies bcp, votre première méthode a fonctionné tout de suite !

Cordialement.
Réponse 5 / 7
Messages postés
1706
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
13 mai 2018
 338
je peux aussi t'aider pour la solution en Javascript. Où est-ce que ça te dit que t'as une erreur de syntaxe ?
Réponse 6 / 7
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
Super ! car au final je n'ai toujours pas trouvé..enfin je m'approche mais pas vraiment ce que je voulais :

http://transmission-commerce.com/iequipa/index.php/nos-produits/product/40-produit-test-final

(le bouton "fiche technique")


l'erreur de syntaxe c'est quand je rajoute exactement copié collé :

<img src="img/image_1_out.png" onmouseover="this.src='img/image_1_on.png'" onmouseout="this.src='img/image_1_out.png'" />


voici le code en entier ou j'ai rajouté cette ligne, léerreur se situe à la fin de la ligne

?><div id="hikashop_product_files_main" class="hikashop_product_files_main">
<?php
if (!empty ($this->element->files)) {
$skip = true;
foreach ($this->element->files as $file) {
if ($file->file_free_download)
$skip = false;
}
if (!$skip) {
global $Itemid;
$url_itemid='';
if(!empty($Itemid)){
$url_itemid='&Itemid='.$Itemid;
}
?>
<fieldset class="hikashop_product_files_fieldset">
<?php
$html = array ();
echo '<legend>' . JText :: _('') . '</legend>';
foreach ($this->element->files as $file) {
if (empty ($file->file_name)) {
$file->file_name = $file->file_path;
}
$fileHtml = '';
if (!empty ($file->file_free_download)) {
$fileHtml = '<a class="hikashop_product_file_link" href="' . hikashop_completeLink('product&task=download&file_id=' . $file->file_id.$url_itemid) . '">
<img src="http://www.transmission-commerce.com/iequipa/images/bouton-fiche-1.png" onmouseover="this.src='http://www.transmission-commerce.com/iequipa/images/bouton-fiche-2.png'" onmouseout="this.src='http://www.transmission-commerce.com/iequipa/images/bouton-fiche-1.png'" /></a>';
}
$html[] = $fileHtml;
}
echo implode('<br/>', $html);
?>
</fieldset>
<?php
}
}
?>
</div>
Réponse 7 / 7
Messages postés
15
Date d'inscription
samedi 14 juin 2014
Statut
Membre
Dernière intervention
16 juin 2014
ce que je comprends car juste en faisant un copié collé dans firebug niquel ça passe sans soucis j'ai bien mon image qui change au click c'est niquel je comprends pas.
Posez votre question