Changer image passage souris sur lien Résolu

Question

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!


Configuration: Windows 7 / Google Chrome

notobe · Answer

http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php

L44 · Answer

ç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;

Changer image passage souris sur lien

2 réponses

Votre réponse

Discussions similaires

Newsletters