Image qui change au passage de la souris(rollover)

Résolu

Souris

geoffray62 Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
geoffray62 Messages postés 15 Date d'inscription Statut Membre Dernière intervention - 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)
Changer de dns - Guide
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word
Quelle touche pour débloquer la souris ? - Guide
Image qui change quand on bouge ✓ - Forum Graphisme
Passage qwerty azerty - Guide

7 réponses

Réponse 1 / 7

canarder Messages postés 1714 Date d'inscription Statut Membre Dernière intervention 355

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 Statut Membre Dernière intervention

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

Comment augmenter les Hertz de sa souris?

Clic molette qui ne marche pas

Comment connecter sa souris sans fil à son pc portable?

faire un copier/coller si possible avec la souris

Ma souris bouge toute seule!

Faire passer ma souris d'un écran à l'autre

Votre réponse

Discussions similaires