Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

[Javascript] Modifier un "attribut" style

<img src="...." style="...">

Sujet résolu

Anonyme

28 août 2006 à 12:16:36

Bien le bonjour à tous

Alors voilà, j'aimerai faire une galerie d'images, pour ce faire j'ai eu besoin d'utiliser un peut de javascript déjà pour l'image à affiché (sa modifie l'url de l'image au passage de la souris pour afficher celle que le visiteur veut visualiser), mais maintenant je suis confronté à un problème, la modification de l'attribut "style" pour une image (ou autre d'ailleurs) au départ j'ai pensé tout bêtement qu'il fallait faire comme pour modifier l'attribut "src" mias non sa ne marche pas, donc je vient ici pour vous demander si déjà c'est chose possible que de modifier cette attribut en javascript, et si oui comment.

Sinon si vous connaissez une autre technique pour centrer à tout les coup l'image comme il faut.

Merci d'avance pour votre aide

28 août 2006 à 12:58:43

Salut,
en javascript, l'attribut style de la balise est un objet qui contient toutes les propriétés CSS applicables.

Par exemple :

element.style.width = "100px";

...correspond à ça :

width:100px

Tu trouveras ici toutes les propriétés auxquelles tu peux acceder.

Cordialement,
Gregoo

Anonyme

28 août 2006 à 13:02:33

Ok merci des infos je test sa tout de suite et je marque que mon problème est résolu juste après je pense

Euh bon j'y arrive pas lol, voici mon code javascript :

<script type="text/javascript">
function image(numero, largeur, hauteur)
{
var marge_cote = ((800 - largeur) / 2);
var marge_haut = ((640 - hauteur) / 2);

var lien = "miniature/miniature" + numero;

window.document.grande_image.src = lien;
window.document..grande_image.style.marginLeft = marge_cote;
window.document.grande_image.style.marginRight = marge_cote;
window.document.grande_image.style.marginTop = marge_haut;
window.document.grande_image.style.marginBottom = marge_haut;
}
</script>

Et voici le petit bout de code HTML concerné :

<div id="image">
<img name="grande_image" style="" src="">
</div>

Anonyme

29 août 2006 à 10:07:33

Up ! J'y arrive toujours pas ...

Anonyme

29 août 2006 à 11:53:01

remplace
window.document..grande_image.style.marginLeft = marge_cote;

par
window.document.grande_image.style.marginLeft = marge_cote;

et change tout les
grande_image

en
getElementByName("grande_image")

il faudra pensez à mettre dans le code de l'image
name="grande_image"

Anonyme

29 août 2006 à 12:12:33

Sa marche toujours pas

Est-ce que sa peut marcher au moins avec des onmouseover ? Car si j'ai bien comprit certaines choses ne marchent pas avec onmouseover donc peut être que modifier l'attribut "styl" n'est pas possible. (la sa n'affiche même plus l'image en faites).

Si sa peut aider voici le code entier :

<script type="text/javascript">
function image(numero, largeur, hauteur)
{
var marge_gauche = ((800 - largeur) / 2);
var marge_haut = ((640 - hauteur) / 2);

var lien = "miniature/miniature" + numero;

window.document.getElementByName("grande_image").style.marginLeft = marge_gauche;
window.document.getElementByName("grande_image").style.marginTop = marge_haut;

window.document.getElementByName("grande_image") .src = lien;
}
</script>
</head>

<body>
<div id="conteneur">

<div id="banniere"></div>

<div id="liste_image">
<?php
/* Connexion à la Base De Donnée */
mysql_connect("localhost", "root", "");
mysql_select_db("gallerie");

/* Récupération du nombre d'image qu'il y a au totale dans la gallerie */
$nombre_images = mysql_query("SELECT nbr_img_tux FROM images") or die(mysql_error());
$nombre = mysql_fetch_array($nombre_images);

$image_totale = $nombre['nbr_img_tux']; // Nombre d'image qu'il y a dans la galerie sélectionné
$image = '1'; // On initialise la variable image à 1, elle permettra par la suite d'afficher les images
$image_affiche = '1'; // Variable permettant de définir le nombre d'images affichés et de savoir si toutes les images de la gallerie sélectionné ont étaient affichés

while($image_affiche <= $image_totale)
{
if(is_file('images/image' . $image . ''))
{
$taille = getimagesize('images/image' . $image . '');
$largeur = $taille[0];
$longueur = $taille[1];
?>
<img onmouseover="image('<?php echo $image; ?>', '<?php echo $largeur; ?>', '<?php echo $longueur; ?>')" src="miniature/miniature<?php echo $image; ?>">
<?php
$image_affiche++;
}

$image++;
}
?>
</div>

<div id="image">
<img name="grande_image" src="" style="" >
</div>
</div>
</div>

29 août 2006 à 12:39:21

getElementByName n'existe pas. C'est getElementsByName() et ça renvoit donc un tableau d'objet qui ont le name en question.
Donc soit:
-Tu remplace getElementByName("grande_image") par getElementsByName("grande_image")[0] (premier élément trouvé).
-Tu remplace getElementByName("grande_image") par getElementById("grande_image") et tu remplace ensuite dans ton code html, name="grande_image" par id="grande_image"

edit: lol moi aussi je l'oublit le "s" :-°

:-°

Anonyme

29 août 2006 à 15:00:32

Sa remarche pour l'affichage, mais par contre mes marges sont toujours pas appliqués

EDIT: Ok j'ai trouvé le problème, j'avais oublié de mettre "px" ... Si sa peut aider quelqu'un voici le code que j'ai maintenant et qui marche correctement (du moins au premier coup d'oeil lol)

<script type="text/javascript">
function image(numero, largeur, hauteur)
{
var marge_gauche = ((785 - largeur) / 2);
var marge_haut = ((640 - hauteur) / 2);

var lien = "images/image" + numero;

   window.document.getElementsByName("grande_image")[0].style.marginLeft = marge_gauche +"px";
window.document.getElementsByName("grande_image")[0].style.marginTop = marge_haut +"px";

window.document.getElementsByName("grande_image")[0].src = lien;
}
</script>
</head>

<body>
<div id="conteneur">

<div id="banniere"></div>

<div id="liste_image">
<?php
/* Connexion à la Base De Donnée */
mysql_connect("localhost", "root", "Az1Er2Ty3");
mysql_select_db("gallerie");

/* Récupération du nombre d'image qu'il y a au totale dans la gallerie */
$nombre_images = mysql_query("SELECT nbr_img_tux FROM images") or die(mysql_error());
$nombre = mysql_fetch_array($nombre_images);

$image_totale = $nombre['nbr_img_tux']; // Nombre d'image qu'il y a dans la galerie sélectionné
$image = '1'; // On initialise la variable image à 1, elle permettra par la suite d'afficher les images
$image_affiche = '1'; // Variable permettant de définir le nombre d'images affichés et de savoir si toutes les images de la gallerie sélectionné ont étaient affichés

while($image_affiche <= $image_totale)
{
if(is_file('images/image' . $image . '') AND is_file('miniature/miniature' . $image . ''))
{
$taille = getimagesize('images/image' . $image . '');
$largeur = $taille[0];
$hauteur = $taille[1];
?>
<img onmouseover="image('<?php echo $image; ?>', '<?php echo $largeur; ?>', '<?php echo $hauteur; ?>')" src="miniature/miniature<?php echo $image; ?>">
<?php
echo $largeur;
echo $hauteur;
$image_affiche++;
}

$image++;
}
?>
</div>

<div id="image">
<img name="grande_image" style="">
</div>
</div>
</div>

[Javascript] Modifier un "attribut" style

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.