Changer image passage souris sur lien

Résolu
L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   -  
notobe Messages postés 2222 Statut Membre -
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!

2 réponses

  1.
    notobe Messages postés 2222 Statut Membre 213
     
    http://css.mammouthland.net/rollover-pseudo-classe-css-hover.php
    0
    1. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
       
      Je veux changer l'image pas la couleur d'un lien ça je connaissais ...
      0
    3. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
       
      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
    4. notobe Messages postés 2222 Statut Membre 213
       
      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
    5. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
       
      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
  2. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
     
    ç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
    1. notobe Messages postés 2222 Statut Membre 213
       
      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
    2. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
       
      oui mais rien ne s'afiche pas de lien a survoler...
      0
    3. notobe Messages postés 2222 Statut Membre 213
       
      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
    4. L44 Messages postés 59 Date d'inscription   Statut Membre Dernière intervention   9
       
      oui mais je vais pas mettre : <a href="">survolez </a>
      il doit ya voir quelque chose...
      0
    5. notobe Messages postés 2222 Statut Membre 213
       
      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

Copier un lien instagram
alaurore -
LEFEUVRE -

7 réponses
Retrouver liens copiés sur le téléphone
SAMA -
Lylou -

2 réponses
copie d'un lien dans le navigateur internet
Ulysse Orseau -
diamantnoir -

4 réponses
Retrouver l'image originale d'une photo modifiée
Raven -
Asta972155 -

10 réponses
Rajouter des éléments à un menu en HTML
leparradiss -
David -

11 réponses