Sujet Précédent Sujet Suivant

Changer image passage souris sur lien

Résolu/Fermé
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 - 29 août 2010 à 14:25
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 - 29 août 2010 à 16:44
Bonjour,
Je voudrais un code HTML ou JS ou CSS pour qu'au passage de la souris sur un lien une image sur la page change.

EX: Le curseur n'est pas sur lien1:
Lien1
Image1

Le curseur est sur lien1:
Lien1
Image2

Le curseur "sort" de lien1
Lien1
Image1

Merci de vos réponses!


A voir également:

2 réponses

Réponse 1 / 2
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
29 août 2010 à 14:56
http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php
0
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
Modifié par L44 le 29/08/2010 à 15:07
Je veux changer l'image pas la couleur d'un lien ça je connaissais ...
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
29 août 2010 à 15:15
Faudrait peut-être lire le tuto jusqu'au bout... ^^
http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php#chgtfd
0
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
29 août 2010 à 15:21
J'ai lu mais c'est l'image de fond du lien que tu me donne ...
Je me suis mal exprimé regarde le menu de --->http://www.customxp.net/ accueil , news , forum

l'image s'agrandi c'est ça que je veux (je pensais qu'il fallait la changer une petite et la même en grand ! dsl si tu ne m'as pas compris
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
29 août 2010 à 15:34
Ah oui, ce n'est pas l'image du lien qui change, c'est une autre image, plus loin...
Là c'est du javascript.
http://www.customxp.net/js/rollover.js
0
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
29 août 2010 à 15:40
img[i].src = "http://www.customxp.net/skin/common/" + img_name[i] + "_big.png";

a la place de http://www.customxp.net/skin/common/ je met quoi?
0
Réponse 2 / 2
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
29 août 2010 à 15:53
ça ne marche pas :(
voila mon code :
index.html 

<html>
<head>
</head>
<body>
<script type="text/javasript" src="test.js"></script>
</body>
</html>


test.js: 


var MIN = 48;
var MAX = 72;

var img_name = ["home", "news", "forum", "logit", "tuto", "pngf"];
var img = new Array();

var ie = 0;

function preload() 
{  
  if ((navigator.appVersion.indexOf("MSIE") != -1) && !window.opera)
    ie = 1;
  else
  {
    for (i = 0; i < 6; ++i) 
    {
      img[i] = new Image;
      img[i].src = "img" + img_name[i] + "big.png";
    }
  }
}

function getOffset(el, which) 
{
    var amount = 0;
    
    while (el) 
    {
      amount += el[which]
      el = el.offsetParent
    }
    
    return amount
}

function getX(e)
{
    if (document.all)
    {
        if (document.documentElement)
            return e.clientX + document.documentElement.scrollLeft;
        else
            return e.clientX + document.body.scrollLeft;
    }
    else
        return e.pageX;
}

function getY(e, obj)
{
    if (document.all)
    {
        if (document.documentElement)
            return Math.abs(e.clientY + document.documentElement.scrollTop - getOffset(obj, "offsetTop") - 17);
        else
            return Math.abs(e.clientY + document.body.scrollTop - getOffset(obj, "offsetTop") - 17);
    }
    else
        return Math.abs(e.pageY - getOffset(obj, "offsetTop") - 17);
}

function mouse_enter(e)
{  
    var dock = document.getElementById('dock');
    var img_tags = dock.getElementsByTagName('img');

  var header = document.getElementById('header_menu');
    var li = header.getElementsByTagName('li');
  
    var img_size = [0, 0, 0, 0, 0, 0];
    var att, i, total, val, x, y;
    
    x = getX(e);
    y = getY(e, header);
    
    if (y < 17)
        att = 0;
    else
        att = y - 17;

    for (i = 0, total = 0; i < 6; ++i)
    {
    val = MAX - 0.3 * Math.abs((getOffset(li[i], "offsetLeft") + getOffset(li[i + 1], "offsetLeft")) / 2 - x) - att;    

    val = Math.round(val);
        if (val < MIN) 
            val = MIN;
    
    if (!ie)
    {
      if (val < 60)
        img_tags[i].src = "img" + img_name[i] + "small.png";
      else
        img_tags[i].src = "img" + img_name[i] + "big.png";
    }

        total += val;
        img_size[i] = val;
    }
    
    document.getElementById('nav_bar').style.width = total + 'px';
    
    for (i = 0; i < 6; ++i)
    {
        document.getElementById("nav_bar_" + i).style.paddingTop = (MAX - img_size[i]) + 'px';
        img_tags[i].width = img_size[i];
        img_tags[i].height = img_size[i];
    }
}

window.onload = preload;
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 29/08/2010 à 16:00
tes images s'appellent bien home, news, forum, logit, tuto, pngf ? Et les grandes le même nom avec big à la fin ?

Et puis ce ne doit pas être img[i].src = "img" mais img/ (c'est un repertoire ! et attention au chemin... /img/ serait peut être mieux.)
0
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
29 août 2010 à 16:13
oui mais rien ne s'afiche pas de lien a survoler...
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
29 août 2010 à 16:17
Pas de liens à survoler ? Ah ben ça, si tu n'as pas créé de vrais liens dans le code html c'est normal ;)
Le js créé juste l'effet sur les liens, pas les liens en eux-mêmes.
0
L44 Messages postés 138 Date d'inscription mardi 30 mars 2010 Statut Membre Dernière intervention 7 août 2012 9
29 août 2010 à 16:32
oui mais je vais pas mettre : <a href="">survolez </a>
il doit ya voir quelque chose...
0
notobe Messages postés 1952 Date d'inscription mercredi 11 novembre 2009 Statut Membre Dernière intervention 8 juillet 2011 213
Modifié par notobe le 29/08/2010 à 16:46
Bien sûr ! Faut peut-être aller voir le code html de plus près aussi pour comprendre... :\

Les images sont dans un div s'appelant 'dock' et les liens, sous forme de liste, dans un div s'appelant 'header_menu'
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
lien copié
alaurore -
LEFEUVRE -

7 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses