Sujet Précédent Sujet Suivant

Ouvrir image au passafe de la souris

cathy_9999 Messages postés 136 Statut Membre -  
 Eric27 -
Bonjour,

Je souhaiterais réaliser sur mon site des vignettes popup qui s'ouvre au passage de la souris sur une image.

Quand je passe la souris sur une image, je souhaiterais que cela m'ouvre une petite popup avec une autre image dedans mais pas dans une nouvelle fenêtre.

J'espere que vous comprenez ce que je souhaite realiser.
A voir également:

15 réponses

Réponse 1 / 15
Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
 
salut,

une version valide et accessible.

1
Réponse 2 / 15
PhP Messages postés 1774 Statut Membre 606
 
Bjr

J'espere que vous comprenez ce que je souhaite realiser. Pas vraiment lol

Lorsque tu survoles une vignette tu veux que ça t'affiche l'image en taille normale dans une cadre par dessus la page un peu à la manière des messages qui apparaissent sur certains liés de ce site à côté de la souris dans Discussions & Opinions des Communautés par ex ?
0
Réponse 3 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
Oui voila je veux tout a fait cela ! connaitriez tu le code?
0
Réponse 4 / 15
PhP Messages postés 1774 Statut Membre 606
 
D'abord même si ça te semble simple en fait le code n écéssaire pour le réaliser n'est pas aussi trivial qu'il y paraît, je dirais même que c'est plutôt complexe par rapport à l'affichage d'une nouvelle page (je dois en avoir un qui fait à peu près ça dans un coin faut que je mette la main dessus)

Ensuite tes images elles sont censées apparaitre où ? En plein mileur de l'écran ? Toujours au même endroit ?
Si ton image est très grande tu fais comment ? Une fois affichée comment ton image disparait-elle ? Lorsque la souris quitte la vignette ? Car dans ce cas il ne faudrait pas qu'en s'affichant l'image masque les vignettes tu vois le pb ...

As-tu un ex de page visible sur le net ?

En plus pour que ça fonctionne il faut précharger toutes les images en mémoire (pas seulement les vignettes) : ça risque de prendre un certain temps
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
Malheureusement je ne trouve pas d'exemple !
Mes images qui seront placés dans les vignettes, je les aurais prealablement reduis toutes a la meme taille ! donc aucun souci, je veux que la vignette, son coin bas gauche soit collé a la souris et qu'elle disparaise quand j'enleve ma souris de l'image.

merci
0
Réponse 6 / 15
PhP Messages postés 1774 Statut Membre 606
 
Ha tu veux afficher des vignettes au survole d'une "grande" image et pas l'inverse ?

Je pensais le contraire : afficher une "grande" image au suvole d'une vignette ...

Mais bon ça change rien au principe

0
Réponse 7 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
Il ya des miniatures et des que ma souris passe dessus cela affiche dans une toolpit (je sais pas si ca s'appelle bien comme cela), l'image legerement agrandi (qui seron contenu dans un dossier a part des miniatures)

est ce plus claire?
0
Réponse 8 / 15
PhP Messages postés 1774 Statut Membre 606
 
Hum je regarde si j'ai un script facilement adaptable

0
Réponse 9 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
c gentil merci !!
0
Réponse 10 / 15
PhP Messages postés 1774 Statut Membre 606
 
Voici un ex (je sais pas s'il répond exactement à tes besoins)

http://www.nobodysperfect.freesurf.fr/vignette/vignette.htm

Maintenant il faudrait précharger les images pour être sûr de ne pas avoir une croix rouge T'Oh !

Ce qui marche sur une page vide peut ne plus fonctionner sur une mise en page complexe.

Ne pas mettre de marges et autres padding sur les images qui contiennent les vignettes.
0
Réponse 11 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
oui c exactement cela que je cherche !! avez vous le code?
0
Réponse 12 / 15
PhP Messages postés 1774 Statut Membre 606
 
Tu peux l'avoir en faisant Affichage Source depuis le lien ci-dessus

Sinon voici le code (c'est un peu long) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test mouse over</title>

<style>
*
{
	font-family : arial;
	font-size : 12pt;
}

body
{
	margin : 10px;
	padding : 10px;
	border : 0px;

}


.cible
{

	position : relative;
	float : left;
	top : 500px;
	padding:10px;
	border-style : solid;
	margin : 5px;
	border-width : 1px;
}


.popup
{
	position : absolute;
	width : 400px;
	height : 250px;
	border-style : solid;
	border-width : 1px;
	overflow:hidden;
	left : -10000px;
	z-index : 100;
	
}



</style>

<script>
aa= 'input['+j+']['+i+']';

function Target(id, picture, width, height)
{
	this.id = id;
	this.ref = null;
	this.width = width;
	this.height = height;
	this.picture = picture;
}

// Attention : offsetHeight ne fonctionne que si l'élément ne comporte ni marges, ni bordures, ni padding sinon ...
Target.prototype.getHeight = function()
{
	var elt = document.getElementById(this.id);
	return elt.offsetHeight;
}

Target.prototype.getWidth = function()
{
	var elt = document.getElementById(this.id);
	return elt.offsetWidth;
}


function TargetList(popupId, popupWidth, popupHeight)
{
	this.popupId = popupId;
	this.popupWidth = popupWidth;
	this.popupHeight = popupHeight; 
	this.items = new Array();
	
	this.currentIndex = -1;
}

TargetList.prototype.addTarget = function(id,picture,width,height)
{
	var item = new Target(id,picture,width,height);
	item.index = this.items.length;	
	
	var elt = document.getElementById(id);
	this.items.push(item);
}

TargetList.prototype.hidePopup = function()
{
	if (this.currentIndex != -1)
	{
		document.getElementById(this.popupId).style.left=-10000+"px";
		this.currentIndex = -1;
	}	
}

TargetList.prototype.selectTarget = function(index)
{
	if (this.currentIndex != index)
	{
		if ((index >=0) && (index < this.items.length))
		{
			document.getElementById(this.popupId).innerHTML='<img src="'+this.items[index].picture+'">';
			this.currentIndex = index;
		}
	}	
}

TargetList.prototype.showPopup = function(x,y)
{
	var elt = document.getElementById(this.popupId);
	elt.style.left=x+5+"px";
	elt.style.top=y-this.popupHeight+"px";
}

TargetList.prototype.findTarget = function(x,y)
{
	var index = -1;
	for (var i=0; i < this.items.length; i++)
	{
		var position = findPosition(this.items[i].id);
		if ((x >= position.x) && (x < position.x+this.items[i].getWidth()) && (y >= position.y) && (y < position.y+this.items[i].getHeight()))
		{
			index = i;
			break;
		}
	}
	return index;
}


var targetList = new TargetList("popup",400,250);




function strToNumber(value)
{
	var nbr = parseInt(value);
	if (isNaN(nbr)) { nbr = 0;}
	return nbr;
}

// Retourne la position de la souris sur la page (et pas sur l'écran !)
function mousePosition(e)
{
	var result = new Array();
	result["x"] = 0;
	result["y"] = 0;
	if (!e) var e = window.event;
	if (e.pageX || e.pageY) 	{
		result["x"] = e.pageX;
		result["y"] = e.pageY;
	}
	else if (e.clientX || e.clientY) 	{
		result["x"] = e.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		result["y"] = e.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	return result;
}

// Retourne la position absolue d'un objet sur la page
function findPosition(id)
{
	var elt = document.getElementById(id);
	var result = new Array();
	result["x"] = 0;
	result["y"] = 0;
	while (elt)
	{
		result["x"] += elt.offsetLeft;
		result["y"] += elt.offsetTop;
		
		elt = elt.offsetParent;
	}
	
	return result;
}

function mouseMove(e)
{
	var mouse = mousePosition(e);
	index =targetList.findTarget(mouse.x,mouse.y);
	
	if (index != -1)
	{
		targetList.selectTarget(index);
		targetList.showPopup(mouse.x,mouse.y);
	}
	else
	{
		targetList.hidePopup();
	}
}

function load()
{
	targetList.addTarget("cible1","images/AUDI_R8_1.jpg",400,350);
	targetList.addTarget("cible2","images/AUDI_R8_2.jpg",400,350);
	targetList.addTarget("cible3","images/AUDI_R8_3.jpg",400,350);
	
	document.onmousemove=mouseMove;
}

</script>
</head>
<body onload="load()">
<div class="popup" id="popup"></div>
<div class="cible">
<img id="cible1" src="images/AUDI_R8_1.jpg" width="100px">
</div>
<div  class="cible">
<img id="cible2" src="images/AUDI_R8_2.jpg" width="100px">
</div>
<div  class="cible">
<img id="cible3" src="images/AUDI_R8_3.jpg" width="100px">
</div>
</body>
</html>
0
Eric27
 
Bonjour PhP,

je cherchais un script pour afficher des vignettes au passage de la souris sur des images dans une page html, et je suis tombé sur ton script qui fonctionne parfaitement, je l'ai adapté à mes besoins. Il me reste une question à régler pour laquelle je suis un peu perdu : ton script affiche les vignettes à une place qui est associée à la position du pointeur de la sourir, moi je souhaiterai sur les vignettes apparaissent à un endroit précis de l'écran, toujours le même quel que soit la position de ma souris et quelle que soit l'image survolée qui déclenche l'affichage de la vignette. Comment modifier ton script pour arriver à ce résultat ?

merci, Eric
0
Réponse 13 / 15
Anonyme
 
Bonjour

Comme sur CCM dans vos profils ;))))))))))))))))) lol
Ils n'ont rien vu ; faut dire qu'ils n'ont pas (encore ou plus) d'image dans leur profil :))
(Ils ne vont pas non-plus sur le profil d'autrui pour voir les images EN ZOOM ou autres)

Nécessite l'activation de JavaScript !

Galerie photos avec agrandissement en popup - ASP-PHP.net :
http://www.asp-php.net/ressources/bouts_de_code.aspx?id=457

Hier j'ai vu un site web qui présentait des bijoux avec un système de popup flash sur la page à droite (à coté de l'image) et fixe pour zoomer et un carré blanc se trouvait sur l'image moyennement miniature.

Recherche de 'agrandissement photo popup flash zoom' avec Google
https://www.google.fr/search?hl=fr&q=agrandissement+photo+popup+flash+zoom&gws_rd=ssl

Merci
0
Réponse 14 / 15
cathy_9999 Messages postés 136 Statut Membre 22
 
Mes miniatures etant de 160 * 120 pixels et mes grandes de 640 * 480, j'ai changé ceci mais cela ne fonctionne pas !

function load()
{
targetList.addTarget("cible1","miniature_club/1-1.jpg",640,480);
targetList.addTarget("cible2","miniature_club/2-2.jpg",640,480);
targetList.addTarget("cible3","miniature_club/3-3.jpg",640,480);

document.onmousemove=mouseMove;
}

</script>
</head>
<body onload="load()">
<div class="popup" id="popup"></div>
<div class="cible">
<img src="miniature_club/1.jpg" width="160" height="106" id="cible1"></div>
<div class="cible">
<img src="miniature_club/2.jpg" width="160" height="120" id="cible2"></div>
<div class="cible">
<img src="miniature_club/3.jpg" width="160" height="95" id="cible3"></div>
</body>
</html>
0
Réponse 15 / 15
PhP Messages postés 1774 Statut Membre 606
 
Bjr

Aie ! J'ai oublié une ligne (qui n'a rien à voir) dans le code et qui fait tout planter ! Quel c.. lol

Supprime ceci : aa= 'input['+j+']['+i+']'; juste après la balise <script>

Et pense aussi à bien changer les dimensions de ton popup dans le ligne
var targetList = new TargetList("popup",400,250); (ici 400 x 250)
si ce n'est pas déjà fait ;-)

0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses