Image qui change au passage de la souris(rollover)

Résolu/Fermé

Souris

geoffray62 Messages postés 15 Date d'inscription samedi 14 juin 2014 Statut Membre Dernière intervention 16 juin 2014 - 14 juin 2014 à 12:26
geoffray62 Messages postés 15 Date d'inscription samedi 14 juin 2014 Statut Membre Dernière intervention 16 juin 2014 - 14 juin 2014 à 19:44

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:

Image qui change au passage de la souris(rollover)
Frédéric cherche à faire le buzz sur les réseaux sociaux. il a ajouté une image de manchots sur une image de plage. retrouvez l'image originale de la plage. que cachent les manchots ? ✓ - Forum Windows
Facebook piraté et adresse email changé - Forum Facebook
Quelle touche pour débloquer la souris ? - Guide
Piratage facebook changer mot de passe - Guide
Image iso - Guide

7 réponses

Réponse 1 / 7

canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
Modifié par canarder le 14/06/2014 à 12:37

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

Réponse 6 / 7

geoffray62 Messages postés 15 Date d'inscription samedi 14 juin 2014 Statut Membre Dernière intervention 16 juin 2014
14 juin 2014 à 19:37

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>

Discussions similaires

texte au survol de la souris sur une image

afficher texte sur image au passage souris

Comment changer le sens de la souris avec un double écran ?

Afficher un texte au passage de la souris !

afficher un texte au passage de la souris

Image au survol d'un texte

Discussions similaires

Newsletters