Effet de zoom au passage de la souris

Résolu

porcinet54 Messages postés 147 Date d'inscription Statut Membre Dernière intervention -
graffx Messages postés 6506 Date d'inscription Statut Contributeur Dernière intervention - 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.

Afficher la suite

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
Types de souris informatique - Guide
Zoom appel video - Guide

9 réponses

Réponse 1 / 9

graffx Messages postés 6506 Date d'inscription Statut Contributeur Dernière intervention 1 975

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

Réponse 2 / 9

porcinet54 Messages postés 147 Date d'inscription Statut Membre Dernière intervention 5

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 Statut Contributeur Dernière intervention 1 975

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 Statut Membre Dernière intervention 5

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 Statut Contributeur Dernière intervention 1 975

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 Statut Membre Dernière intervention 5

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 Statut Contributeur Dernière intervention 1 975

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 Statut Membre Dernière intervention 5

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 Statut Contributeur Dernière intervention 1 975

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

Discussions similaires

Le curseur de mon ordi ne bouge plus

la souris ne bouge plus sur mon pc portable

Souris de mon ordi portable ne bouge plus

Votre réponse

Discussions similaires