begin process at 2010 09 04 02:06:45
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

AU SECOURS !!!

 > 

Problème: Rollover sur une zone précise de l'image

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Problème: Rollover sur une zone précise de l'image

dimanche 9 avril 2006 à 02:41:46 | Problème: Rollover sur une zone précise de l'image

Sp00ky
Bonjour à toutes et à tous,

Voilà j'aimerais faire un rollover partiel sur une image... c'est à dire en utilisant les zones (areas) d'une image comme pour un lien.
Par exemple, j'ai une barre de menu, quand la souris n'est pas dessus :
http://erogaki-team.info/img/subheader.jpg
Ainsi que celle qui doit s'afficher quand la souris passe dessus : http://erogaki-team.info/img/subheader2.jpg

J'utilise une zone de lien, par exemple pour le premier lien (Accueil) comme ceci :
<img name="img1" src="./img/subheader.jpg" width="900" height="26" border="1" style="border-color:#8ea9be" usemap="#ImageMap1"></p>
<map name="ImageMap1">
<area name="area1" shape="rect" coords="76, 5, 141, 22" href="http://erogaki-team.info/main.php" onMouseOver="img1.src='./img/subheader2.jpg'" onMouseOut="img1.src='./img/subheader.jpg'">
</map>
Cependant, quand la souris passe sur le lien, l'image entière est affichée avec le second menu, je voudrais que seulement la zone du lien voit son image changée, ce qui ferait une sorte d'effet de mise en valeur uniquement du mot ACCUEIL.

Cependant je ne sais pas si c'est possible, et si c'est possible je ne sais pas comment faire...

Merci d'avance pour votre aide !

$p00ky
______________________________________________
.:: KoC-FR ::. Alliance Francophone Kings of Chaos
Venez jouer au meilleur MMORPG gratuit et facile !
dimanche 9 avril 2006 à 09:39:07 | Re : Problème: Rollover sur une zone précise de l'image

Phil_Free
Réponse acceptée !
Salut,

Tu dois découper ton image en plusieurs morceaux, un morceau pour Accueil, un pour Forum etc.
Dans ton cas 10 cellules.

Exemple image home_01.jpg :



Tu découpes l'image de rollOver de manière identique:



Tu mets ensuite ces images dans une table comme ceci:

<table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="26" width="900">
    <tbody><tr>
        <td>
            <a href="http://erogaki-team.info/main.php" onmouseover="changeImages('home_01', 'home_01-over.jpg'); return true;" onmouseout="changeImages('home_01', 'home_01.jpg'); return true;" onmousedown="changeImages('home_01', 'home_01-over.jpg'); return true;" onmouseup="changeImages('home_01', 'home_01-over.jpg'); return true;">
                <img name="home_01" src="home_01.jpg" alt="" border="0" height="41" width="128"></a></td>
    </tr>
    <tr>
        <td>
            <a href="http://erogaki-team.info/forum.php" onmouseover="changeImages('home_02', 'home_02-over.jpg'); return true;" onmouseout="changeImages('home_01', 'home_02.jpg'); return true;" onmousedown="changeImages('home_02', 'home_02-over.jpg'); return true;" onmouseup="changeImages('home_02', 'home_02-over.jpg'); return true;">
                <img name="home_01" src="home_01.jpg" alt="" border="0" height="41" width="128"></a></td>
    </tr>
...
    </tr>

</tbody></table>

Tu insères ce petit script entre <head> et </head>:
(n'oublie pas de corriger les ... )

<script type="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;

function preloadImages() {
    if (document.images) {
        home_01_over = newImage("home_01-over.jpg");
        home_02_over = newImage("home_02-over.jpg");
        ...
        home_10_over = newImage("home_10-over.jpg");       
        preloadFlag = true;
    }
}

// -->   
</head>

Le plus gros du travail c'est de découper tes 2 images en 10 portions.
dimanche 9 avril 2006 à 12:40:15 | Re : Problème: Rollover sur une zone précise de l'image

Sp00ky
Réponse acceptée !
Merci beaucoup Phil_Free d'avoir pris le temps de me répondre, mais en fait mon but était justement de ne pas avoir à découper cette image, car le menu est amené à évoluer... et faire un redecoupage à chaque fois est assez embêtant...

Cependant en fouinant un peu, j'ai trouvé la panacé !

Exactement ce qu"il me faut, à partir de deux images il est possible sans découper de faire des rollover sélectifs : http://www.pompage.net/pompe/sprites/

C'est génial ;)

Encore merci !

$p00ky
______________________________________________
.:: KoC-FR ::. Alliance Francophone Kings of Chaos
Venez jouer au meilleur MMORPG gratuit et facile !


Cette discussion est classée dans : image, lien, souris, zone, rollover

Répondre à ce message

Sujets en rapport avec ce message

Surligner un lien au passage de la souris sur une image??? [ par Monico9385 ] Bonjour, je vous écris car j'ai une image et un lien qui sont cote a cote, et j'aimerai que quand l'on survole l'image, le lien se souligne. Je préci Changement d'image lien hypertexte [ par psycomel ] Bonjour a tous !Je cherche desperement à faire un mouseOver avec changement d'image avec asp.net.Je fait comme ca dans mon c# : ACCUEIL.Attributes.Add deplacer une image à des coordonnées [ par gnosis35 ] salut voilà le pb : je clic sur une image et là j'ai pour tester deux texts box qui récupérent les coordonnées x,y de la souris... bon ça c tres bi Afficher 2 images au passage de la souris sur une image [ par Monico9385 ] Bonjour, alors voila mon probleme. J'aimerai qu'au passage de la souris sur une imge, cela m'ouvre cette image en plus grand, et au meme moment que c Help ! Probleme de taille d'image dans popup... [ par franck453 ] Bonjour,J'ai repiqué une partie de code sur un site, car il correspondait bien à ce que je voulais faire...A savoir : au survole d'un lien, afficher l desactiver un lien [ par martiall ] Bonjour, pour résumer j'ai une page (page1.php) sur laquelle j'ai une image cette page1.php ouvre une popup avec un bouton qui doit non seulem Problème zone texte et lien [ par willstar ] Hello, je me demandais si c'était possible d'avoir une zone de texte sans un formulaire et que via un lien normal href, est-il possible d'envoyer la v pb avec un lien caché [ par neotetsuo34 ] bonjour, j'aimerais savoir si il est possible quand la souris se trouve sur une photo d'appuyé sur une touche puis de clické avec la souris pour avec Lien image dynamique ? [ par rezan16000 ] Bonjour, j'aurais faire une création avec le . Pour exemple : function choix() { var URL = "http://www.nomdedomaine.com cliqué image transporté déposé... [ par gnosis35 ] Bonjour, Voilà le pb : Dans un site je propose différentes images représentant des couleurs et j'aimerai pouvoir cliquer sur l'une de ces images po


Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Septembre 2010
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
27282930   

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,218 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)