11540 sujets

JavaScript, DOM et API Web HTML5

Faire apparaître une image ailleurs n'importe où quand le curseur de

Bonjour, je voudrais faire apparaître une image n'importe où sur mon site quand le pointeur de la souris se positionne sur une image.
la 1er image qui sert faire apparaître une autre image doit renvoyer vers une autre page aussi.
Savez vous comment faire ? es ce du html ou du javascript ?
Merci par avance pour vôtre aide.
Bonjour,

Il faudra utiliser du JavaScript (un script de montrer/cacher avec modification de position, éventuellement).

Ta page sera toujours en HTML.
Modérateur
Et l'eau,

je t'invite à lire le code ci dessous (code fait de tête) :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul{padding:0;}
        li{float:left;list-style-type:none;width:102px;}
        a img{border:none;width:102px;}
        p img{width:400px;}
    </style>
</head>
<body>
    <div id="diapo">
        <p><img src="http://divertissements.letopdugratuit.com/wallpapers/img/lions/animaux-lions-0006.jpg" alt=""></p>
        <ul>
            <li><a href="#"><img src="http://divertissements.letopdugratuit.com/wallpapers/img/lions/animaux-lions-0006.jpg" alt=""></a></li>
            <li><a href="#"><img src="http://www.fond-ecran.com/ORIGINAUX/animaux/lion/lion_015.jpg" alt=""></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var diapo = document.getElementById('diapo');
            if(diapo){
                var img = diapo.getElementsByTagName('img');
                
                for (var index = 0; index < img.length; index++) {
                    if(index != 0){
                        img.item(index).onmouseover = function(){
                            var srcImg = this.src;
                            img[0].src = srcImg;
                        }
                    }
                }
            }
        }
    </script>
</body>
</html>
</html>

Il est évident que ce code peut être fait facilement avec un framework JS (jcuicui, motools, dojo, etc.)
en jcuicui, ça donnerait un truc du style (code fait de tête) :

        $(function(){
            $('#diapo ul img').mouseover(function(){
                var srcImg = $(this).attr('src');
                $('#diapo p img').attr('src',srcImg);
            });
        })


A moins que tu veuilles faire une infobulle. Là, ça se passe en CSS pour faire simple.
Modifié par niuxe (07 Aug 2012 - 21:30)
Sujet clos
Aller à