18041 sujets

Questions générales et questions de débutants

Afficher/masquer les calques

Bonjour et bienvenue sur le Forum,

Pourrais-tu éditer ton message, car en l'état ton lien et ton exemple de code ne fonctionne pas.
Tu dois te servire des balises Smiley lien et [code] pour encadrer tes liens et tes codes.

De plus, une petit exemple en ligne ou simplement un morceau de code posant problème serait le bienvenu, car en l'état personne ne pourra t'aider.

A bientôt,
Désolée, je suis nouvelle sur le forum et je n'ai pas l'habitude...
j'ai trouvé un tutoriel sur "Afficher/masquer des calques
j'ai donc 2 images : image.jgp et imagebis.jpg (cette dernière est beaucoup plus petite) et je souhaiterais que sur un point bien précis de l'image.jpg, au passage de la souris l'imagebis.jpg apparaisse voila les CSS
Code CSS :
  
<style type="text/css">
<!--
a {
text-decoration: none; /* définition du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de la balise <span> au survol */
display: inline;
position: absolute;
top: 200px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>

et l'html 
<body>
<a href="">afficher le calque<span>texte et images peuvent être placés ici</span></a>
</body>

Avec ce code c'est toute l'image qui est "réactive", je ne souhaiterais avoir qu'une partie de l'image (car d'autres images se rajouteront telle que imagebis.jpg)
je vous envoie les 2 images
upload/11892-imagebis.jpg

voilà tout ça

et encore merci Cygnus
ce sont ces images à prendre en considération (celle du message précédent était un essai : je pensais superposer les 2 photos celle avec le "petit carré" et celle sans... mais vu que je vais avoir plusieurs éléments à intégrer sur le plan

upload/11892-image.jpg upload/11892-portes.jpg
les bonnes images
j'ai trouvé sur pompage.net un autre code. J'ai essayé mais le problème est que sur IE aucune photo n'apparait et que sur Firefox, l'image se répète Grrrrr

voici le code
<style media="screen">

#skyline {
 width: 1100px;
 height: 800px;
 background: url(image47.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#skyline li {margin: 0; padding: 0; list-style: none; position: absolute; top: 376px;}

#skyline li, #skyline a {
	height: 109px;
	display: block;
}
#bloc1{
	left: 102px;
	width: 100px;
	border: thin solid #000000;
	height: 300px;
	background-repeat: no-repeat;
	display: block;
}
#bloc2 {left: 562px; width: 260px;}


#bloc1 a:hover {background: transparent url(ouverture.jpg) -200px;}
#bloc2 a:hover {background: transparent url(test-3.jpg) -96px -200px no-repeat;}

 </style>


et le html

<body>
 <ul id="skyline">
  <li id="bloc1"><a href="#"></a></li>
  <li id="bloc2"><a href="#"></a></li>

  
 </ul>
</body>


je ne travaille que sur le bloc1

merci de votre aide
Sujet clos
Aller à