[CSS/Javascript] Positionnement relatif d'une image dans un DIV

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS/Javascript] Positionnement relatif d'une image dans un DIV

ceyquem

E falso sequitur quodlibet

Bonjour,

je voudrais être capable de positionner une image dans un div de façon relative.
J'ai pensé à deux méthodes en javascript/CSS :
- soit il est possible de le faire directement
- soit on peut récupérer les coordonnées de la DIV en question puis y ajouter un offset en X et en Y pour faire du positionnement relatif.

Quelqu'un a-t-il déjà fait ça ?

Publicité

ceyquem

E falso sequitur quodlibet

pas d'idées sur ce coup là ???

gatsusat

ben soit ya rien dans le div et l'image tu la possition avec le margin-left et le margin-top, soit tu met ta div en position:relative, et l'image en position:absolute, puis apres libre à toi te placer l'image avec les propriété top et left

ceyquem

E falso sequitur quodlibet

ok, j'ai un code qui va bien pour faire ça. Maintenant, je voudrais que je puisse modifier la position du div intérieur par javascript .

Voici la feuille de style :

Code :

div.carte {
background-color: #ddf;
border: 1px solid #669;
padding: 0em;
margin: .25em;
width: 15em;
height: 15em;
}
div.carte div.croix {
position: relative;
background-color: #ea9;
width: 1em;
height: 1em;
left: 1em;
top: 4em;
}

voici ma page de test :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="carte">
<div class="croix"> </div>
</div>
</body>
</html>

une indication ??

gatsusat

pkoi modifier la position du div avec du JS ?
parke tu arives po à le faire en CSS ?

ceyquem

E falso sequitur quodlibet

Ben je voudrais de façon dynamique que lorsqu'on survole un lien, l'image prenne une position en fonction du lien. Les positions possibles étant nombreuses, je préfère n'avoir qu'une image.

Je ne vois pas de solution en CSS uniquement

plainsofpain

Pingouino's lover

Chelou ton truc ...

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

ceyquem

E falso sequitur quodlibet

up !

ceyquem

E falso sequitur quodlibet

Lund

Met des id à ton <div> rouge comme ça:

Code :

<div class="carte">
<div id="croix" class="croix"> </div>
</div>

Et change sa position avec ça, en Javascript:

Code :

document.getElementById('croix').style.left = '5em';
//ou
document.getElementById('croix').style.top = '5em';

C'est bien ça ?

Publicité

ceyquem

E falso sequitur quodlibet

hum, ça ressemble à ce que je cherche
je teste ça en détails et je te dis
merci !

Message édité par ceyquem le 08-07-2005 à 08:17:40

gatsusat

j'aurai dis qu'il y a plus simple :

c'est pas un truc de ce genre là que tu veux faire ??

http://www.elmoustikoblog.net/bordel/mangas_nemesis/

regarde le texte en bas à droite du l'image.

et tout ca rien qu'en CSS

ceyquem

E falso sequitur quodlibet

Dis donc c'est très très joli ça
mais c'est pas exactement ce que je veux faire.
Merci en tout cas

ceyquem

E falso sequitur quodlibet

Excellent !
Je viens de tester ton code et c'est parfaitement ce qu'il me fallait Merci
Bonne journée à tous

ceyquem

E falso sequitur quodlibet

Ma page de test :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" language="JavaScript">
function move( Pleft, Ptop ){
PcH = false;
if ( document.getElementById && document.getElementById( 'croix' ) ) // Pour les navigateurs récents
{
Pdiv = document.getElementById( 'croix' );
PcH = true;
}
else if ( document.all && document.all[ 'croix' ] ) // Pour les veilles versions
{
Pdiv = document.all[ 'croix' ];
PcH = true;
}
else if ( document.layers && document.layers[ 'croix' ] ) // Pour les très veilles versions
{
Pdiv = document.layers[ 'croix' ];
PcH = true;
}
if(PcH)
{
Pdiv.style.left = Pleft;
Pdiv.style.top = Ptop;
}
}
</script>
</head>
<body>
<div class="carte">
<div class="croix" id="croix"> </div>
</div>
<div><a href="#" onmouseover="javascript:move('0em','0em')">Top Left</a></div>
<div><a href="#" onmouseover="javascript:move('0em','6.5em')">Left</a></div>
<div><a href="#" onmouseover="javascript:move('0em','14em')">Bottom Left</a></div>
<div><a href="#" onmouseover="javascript:move('6.5em','0em')">Top</a></div>
<div><a href="#" onmouseover="javascript:move('6.5em','6.5em')">Middle</a></div>
<div><a href="#" onmouseover="javascript:move('6.5em','14em')">Bottom</a></div>
<div><a href="#" onmouseover="javascript:move('14em','0em')">Top Right</a></div>
<div><a href="#" onmouseover="javascript:move('14em','6.5em')">Right</a></div>
<div><a href="#" onmouseover="javascript:move('14em','14em')">Bottom Right</a></div>
</body>
</html>

Message édité par ceyquem le 08-07-2005 à 19:51:10

gatsusat

le code de ki ?

ceyquem

E falso sequitur quodlibet

Lund

gatsusat

erf ben ta po tout compris toi
je te fais la meme chose ke tu veux faire (une action sur survol de souris) en CSS et purement en CSS en placant l'image en question ou je veux.

ceyquem

E falso sequitur quodlibet

ben je veux bien voir le code

denzz

huhuuuuu ! (désolé )

gatsusat a écrit :

:ouch: :ouch:
ca me troue l'cul!!
franchement chiadé ton truc gatsu, euhh y'aurait moyen d'avoir la CSS qui va avec ou alors m'expliquer succintement le principe ? Pasque là y'a moy' de rien récupérer à part le code HTML :'(
Tes images sont découpées très serré, ou y'a de la transparence ? Comment fais-tu pour les 'superposer' ? Z-index ?
merci d'avance, ca m'intéresse beaucoup :hello:

ceyquem

E falso sequitur quodlibet

Code :

* { margin: 0 ; padding: 0 ; }
h1#header
{
width: 785px ;
height: 247px ;
background: url(design/header.jpg) no-repeat ;
}
h1#header span
{
display: none ;
}
ul#menu
{
width: 785px ;
/* on fixe la largeur pour régler la différente interprétation des éléments flottant sous Opera */
height: 103px ;
list-style-type: none ;
background: url(design/vignettes.jpg) no-repeat ;
}
ul#menu li
{
float: left ;
}
ul#menu li a
{
display: block ;
height: 92px ;
position: relative ;
color: #A8B4F3 ;
text-decoration: none ;
}
li#news a { width: 139px ; margin-left: 133px ; }
li#projets a { width: 60px ; margin-left: -15px ; }
li#team a { width: 83px ; margin-left: -21px ; }
li#forum a { width: 88px ; margin-left: -14px ; }
li#livre a { width: 108px ; margin-left: -22px ; }
li#liens a { width: 108px ; margin-left: -26px ; }
li#news a:hover { background: url(design/vignettes.jpg) 0 -103px ; z-index: 1 ; }
li#projets a:hover { background: url(design/vignettes.jpg) -139px -103px ; z-index: 1 ; }
li#team a:hover { background: url(design/vignettes.jpg) -199px -103px ; z-index: 1 ; }
li#forum a:hover { background: url(design/vignettes.jpg) -282px -103px ; z-index: 1 ; }
li#livre a:hover { background: url(design/vignettes.jpg) -370px -103px ; z-index: 1 ; }
li#liens a:hover { background: url(design/vignettes.jpg) -478px -103px ; z-index: 1 ; }
ul#menu li a span
{
display: none ;
}
ul#menu li a:hover span
{
display: block ;
width: 150px ;
position: absolute ;
top: 65px ;
}
li#news a:hover span { left: 500px ; }
li#projets a:hover span { left: 376px ; }
li#team a:hover span { left: 337px ; }
li#forum a:hover span { left: 269px ; }
li#livre a:hover span { left: 203px ; }
li#liens a:hover span { left: 120px ; }

ceyquem

E falso sequitur quodlibet

je m'explique pourquoi je pense que le pur css n'ira pas : il faut que le survol d'un lien fasse bouger un div qui est dans un autre bloc css que le lien.

donc a priori avec le span ca marcherait pas.

plainsofpain

Pingouino's lover

denzz a écrit :

le css est pas caché, tu affiches la source html, et t'as ce qu'il faut

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

OlivierPatry

Euh, pour l'exemple violet, c'est moi l'auteur du code CSS pas gatsusat

Et pour le graphisme, c'est l'auteur qui l'a fait, faudrait que je vire cet exemple de mon FTP d'ailleurs.

Ca vient de là :
http://forum.hardware.fr/hardwaref [...] 4743-1.htm

L'idée est donc de jouer sur les z-index, le positionement relatif et les position négatives pour positionner les images au bon endroit.
C'est tout un jeu de réglage.
En fait, les z-index ne servent qu'à IE qui faisait passer les images par dessous.
Le truc réside aussi dans le bon découpage des images et des zones.

Enfin, pour obtenir un effet des plus réussi, il convient d'utiliser une image unique pour l'état normal et l'état survolé sinon, le temps de latence dû au chargement de l'image de l'état survolé est plutôt pénible.

Vous pourrez retrouver ce genre d'exemples sous peu sur mes tutos qui sont en cours de réorganisation avec des nouveaux qui vont arriver.
http://tutoriels.olivier-patry.net
Ca arrivera d'ici la fin de la semaine, peut être même avant.

@+

OlivierPatry

Ahh oui j'oubliais.

Les sources sont directement disponible sur la page.

La source HTML saute aux yeux. Et pour tout ce qui est style/mise en page/mise en forme etc, c'est géré comme il se doit par les styles CSS comme l'indiquer le @import url(style.css); dans la balise <style>

Pour l'image utilisée : http://www.elmoustikoblog.net/bord [...] nettes.jpg

Vous voyez le découpage bien réglé pour la partie survolée.

Message édité par OlivierPatry le 26-07-2005 à 15:42:36

gatsusat

erf oué javais oublié de dire que c'est pas de moi, toutes mes excuses

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[CSS/Javascript] Positionnement relatif d'une image dans un DIV

Sujets relatifs
[ css ] texte dans un DIV	lire un fichier text ou autre avec javascript
Envoyez un formulaire +ouvrir lien en cliquant sur une image [sans JS]	CSS XHTML quel raisonement prendre
Pb javascript: formulaire	tableaux php=>tableau javascript
javascript et plusieurs select	Ouvrir une image dans un calque et pas un popup
javascript] rendre une zone texte "hidden"	formulaire + image
Plus de sujets relatifs à : [CSS/Javascript] Positionnement relatif d'une image dans un DIV

Page générée en 0.110 secondes