Effet de zoom au passage de la souris

Résolu/Fermé

porcinet54 Messages postés 147 Date d'inscription mardi 2 juin 2009 Statut Membre Dernière intervention 21 avril 2018 - 20 août 2011 à 15:47
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 - 20 août 2011 à 17:20

Bonjour,

je cherche à adapté un effet d'images sur mon site comme sur ce site http://www.cssplay.co.uk/menu/lightbox.html#Birds

j'ai essayé a plusieur reprise mais il se met n'importe ou sur la page, de plus j'ajoute que mon site html à une feuille de style css pourriez vous m'aidez s'il vous plait, merci à vous.

A voir également:

Effet de zoom au passage de la souris
Quelle touche pour débloquer la souris ? - Guide
Effet miroir word - Guide
Passage qwerty azerty - Guide
Zoom pour pc - Télécharger - Téléphonie & Visio
Autoclick souris - Télécharger - Divers Utilitaires

9 réponses

Réponse 1 / 9

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
20 août 2011 à 15:50

tu as essayé le script de cette page ou un autre?

Réponse 2 / 9

porcinet54 Messages postés 147 Date d'inscription mardi 2 juin 2009 Statut Membre Dernière intervention 21 avril 2018 5
20 août 2011 à 15:52

j'ai pris le script de la page qu'ils ont fournis avec ceci
Download gallery.zip. The source code with the stylesheet in the head. You will, however, need to supply your own photographs.
qu'il ont fournis plus bas sur la page

Réponse 3 / 9

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
20 août 2011 à 15:55

et sinon le zoom fonctionne meme si ca se met n'importe ou?

si ca fonctionne mais va n'importe ou, c'est juste du css, copie le css de ce script et ajoute le au tien, en faisant attention de ne pas avoir entre toi et ce script des nom identiques.

Réponse 4 / 9

porcinet54 Messages postés 147 Date d'inscription mardi 2 juin 2009 Statut Membre Dernière intervention 21 avril 2018 5
20 août 2011 à 15:59

oui le zoom fonctionne très bien mais l'ensemble de ce tableau ce place n'importe ou c'est à dire ne respecte pas les balise div ou si on veut le mettre dans un tableau ( il déborbe) et j'ajoute que je n'arrive pas à le redimensionnée
de plus j'ai placé ce code dans le code html et non à la feuille de style css

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

Posez votre question

Réponse 5 / 9

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
20 août 2011 à 16:13

ben faut voir comment tu a copié ca, mais je suis sur a 90% que c'est un probleme de css!

Réponse 6 / 9

porcinet54 Messages postés 147 Date d'inscription mardi 2 juin 2009 Statut Membre Dernière intervention 21 avril 2018 5
20 août 2011 à 16:15

ok et je fais comment pour résoudre ceci stp merci par avance

Réponse 7 / 9

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
20 août 2011 à 16:17

ben comme je n' ai pas le code sous les yeux, ca va etre difficile de te depanner.

Peut-etre en nous copiant les partie concernées (css +html) mais pas toute la page sinon on ne voit plus rien

Réponse 8 / 9

porcinet54 Messages postés 147 Date d'inscription mardi 2 juin 2009 Statut Membre Dernière intervention 21 avril 2018 5
20 août 2011 à 16:45

voici le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Cross Browser Multi Page Photograph Gallery</title>
<meta name="Author" content="Stu Nicholls" />

<style type="text/css">

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/lightbox.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

</head>

<body>

<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits</a>

<ul>
<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait2.jpg"><img src="lbox/portrait2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait3.jpg"><img src="lbox/portrait3a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait4.jpg"><img src="lbox/portrait4a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait5.jpg"><img src="lbox/portrait5a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait6.jpg"><img src="lbox/portrait6a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait7.jpg"><img src="lbox/portrait7a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait8.jpg"><img src="lbox/portrait8a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait9.jpg"><img src="lbox/portrait9a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait10.jpg"><img src="lbox/portrait10a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait11.jpg"><img src="lbox/portrait11a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait12.jpg"><img src="lbox/portrait12a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait13.jpg"><img src="lbox/portrait13a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait14.jpg"><img src="lbox/portrait14a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait15.jpg"><img src="lbox/portrait15a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/portrait16.jpg"><img src="lbox/portrait16a.jpg" alt="" title="" /></a></li>
</ul>

</li>

<li class="active"><a class="set" href="#Landscapes">Landscapes</a>

<ul>
<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape2.jpg"><img src="lbox/landscape2a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape3.jpg"><img src="lbox/landscape3a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape4.jpg"><img src="lbox/landscape4a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape5.jpg"><img src="lbox/landscape5a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape6.jpg"><img src="lbox/landscape6a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape7.jpg"><img src="lbox/landscape7a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape8.jpg"><img src="lbox/landscape8a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape9.jpg"><img src="lbox/landscape9a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape10.jpg"><img src="lbox/landscape10a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape11.jpg"><img src="lbox/landscape11a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape12.jpg"><img src="lbox/landscape12a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape13.jpg"><img src="lbox/landscape13a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape14.jpg"><img src="lbox/landscape14a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape15.jpg"><img src="lbox/landscape15a.jpg" alt="" title="" /></a></li>
<li><a href="lbox/landscape16.jpg"><img src="lbox/landscape16a.jpg" alt="" title="" /></a></li>
</ul>

</li>
<li><a class="set" href="#Flowers">Flowers</a>

<ul>
<li><a href="#flower1"><img src="http://www.cssplay.co.uk/menu/lbox/flower1.jpg" alt="" title="" /></a></li>
<li><a href="#flower2"><img src="lbox/flower2.jpg" alt="" title="" /></a></li>
<li><a href="#flower3"><img src="lbox/flower3.jpg" alt="" title="" /></a></li>
<li><a href="#flower4"><img src="lbox/flower4.jpg" alt="" title="" /></a></li>
<li><a href="#flower5"><img src="lbox/flower5.jpg" alt="" title="" /></a></li>
<li><a href="#flower6"><img src="lbox/flower6.jpg" alt="" title="" /></a></li>
<li><a href="#flower7"><img src="lbox/flower7.jpg" alt="" title="" /></a></li>
<li><a href="#flower8"><img src="lbox/flower8.jpg" alt="" title="" /></a></li>
<li><a href="#flower9"><img src="lbox/flower9.jpg" alt="" title="" /></a></li>
<li><a href="#flower10"><img src="lbox/flower10.jpg" alt="" title="" /></a></li>
<li><a href="#flower11"><img src="lbox/flower11.jpg" alt="" title="" /></a></li>
<li><a href="#flower12"><img src="lbox/flower12.jpg" alt="" title="" /></a></li>
<li><a href="#flower13"><img src="lbox/flower13.jpg" alt="" title="" /></a></li>
<li><a href="#flower14"><img src="lbox/flower14.jpg" alt="" title="" /></a></li>
<li><a href="#flower15"><img src="lbox/flower15.jpg" alt="" title="" /></a></li>
<li><a href="#flower16"><img src="lbox/flower16.jpg" alt="" title="" /></a></li>
</ul>


</li>
<li><a class="set" href="#Trees">Trees</a>

<ul>
<li><a href="#tree1"><img src="http://www.cssplay.co.uk/menu/lbox/tree1.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree2.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree3.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree4.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree5.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree6.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree7.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree8.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree9.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree10.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree11.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree12.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree13.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree14.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree15.jpg" alt="" title="" /></a></li>
<li><a href="#tree1"><img src="lbox/tree16.jpg" alt="" title="" /></a></li>
</ul>

</li>
<li><a class="set" href="#Birds">Birds</a>


<ul>
<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
</ul>


</li>
</ul>
<br class="clear" />
</div>

</body>
</html>

Réponse 9 / 9

graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 975
20 août 2011 à 17:20

ok bon deja on a le code, mais encuite, pour chaque lien de photo, tu n' a aucune "class" a mettre?

Discussions similaires

Problème Chronopost : Pas d'avis de passage !!

Comment changer le sens de la souris avec un double écran ?

la souris ne bouge plus sur mon pc portable

Le curseur de mon ordi ne bouge plus