begin process at 2012 05 29 05:29:32
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

effet de rotation d'iamge avec script, et lien sur image

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

effet de rotation d'iamge avec script, et lien sur image

vendredi 20 février 2009 à 00:14:56 | effet de rotation d'iamge avec script, et lien sur image

RomantikA

Bonjour,
je ne sais pas trop si c'est le bon endroit pour expoqer mon problème, mais il s'agit d'un code javascript, donc j'ai tenté le tout pour le tout...

J'ai donc un code javascript qui fait tourner des images en rond par rapport à un axe verticale. En positionnant le curseur sur une image, j'ai un aperçu agrandi qui s'affiche au centre du cercle d'image... Et mon problème est que je n'arrive pas à poser des liens sur les images. Je voudrais en effet, que l'orsque l'on clique sur une des images, on soit dirigé vers le lien respectif. Or j'arrive pas à configurer le script pour accepter ces liens. j'ai regarder sur google... j'ai chercher des sortes de slideshow et ce genre de truk, certain son bien, mais bon... je ne trouve pas trop "chaussure à mon pied". J'ai également essayer de trouver comment inssérer des liens, mais je n'ai rien trouver...
Alors si quelqu'un plus doué que moi pouvait m'aider, ce serait très simpatique de sa part car je désespère là :/

voici mon code:

__________________________________
</head>
<body onLoad="window_onload()" style="background-image: url('Images/Quizz/Fond_scene.PNG')">

<script language=javascript>
<!--
var angle=0,ll,hh,bcl,vit=0.025;       // vitesse d'origine: "vit=0.05
//taille des vignettes (taille d'origine: 40)
var taille=100
//largeur de tout le manège (largeur d'origine: 250)
var largeur=200
//hauteur de tout le manège (hauteur 'origine: 100)
var hauteur=15

//Le nombre d'images (de vignettes)
nbrimg=6

//images du manège
var pict=[
 "Images/Quizz/Pres_Quiz_Astronomie.png",
 "Images/Quizz/Pres_Quiz_Cine-TV.png",
 "Images/Quizz/Pres_Quiz_General.png",
 "Images/Quizz/Pres_Quiz_Musique.png",
 "Images/Quizz/Pres_Quiz_Sport.png",
 "Images/Quizz/Pres_Quiz_karaoke.png"]

function window_onload(){
for(i=1;i<=nbrimg;i++){
document.body.innerHTML+="<img id=i"+i+" src="+pict[i-1]+"  ((((onmouseover=\"vit=0\")))) ((((onmouseout=\"vit=0.01\")))) onmouseover=\"document.getElementById(\'viewer\').src=this.src\" class=imag onmouseout=rafrech>"

}
return move()
}
function move(){
ll=document.body.clientWidth/2
hh=document.body.clientHeight/2
document.getElementById("viewer").style.top=hh-150     // hauteur de l'image centrale (plus le nombre est grand, plus l'image est haute) (valeur d'orgine: 150)
document.getElementById("viewer").style.left=ll-147,5     // position verticale, (alignement de la droite de l'image "VIEWER"
angle=angle-vit
for(i=1;i<=nbrimg;i++){
document.getElementById("i"+i).style.left=ll+largeur*(Math.cos(angle+i*2*Math.PI/nbrimg))
document.getElementById("i"+i).style.top=hh+hauteur*(Math.sin(angle+i*2*Math.PI/nbrimg))+document.getElementById("i"+i).width/2
agl=angle+i*2*Math.PI/nbrimg
document.getElementById("i"+i).width=20*(Math.sin(agl))+taille
document.getElementById("i"+i).style.zIndex=50*(Math.sin(agl))+100
document.getElementById("i"+i).style.opacity=(Math.sin(agl)+1)*0.50
document.getElementById("i"+i).style.filter="alpha(opacity="+(Math.sin(agl)+1)*50+")"
}
setTimeout("move()",1)}
//-->
</script>
<center><img src="Images/Quizz/g1.png" id="viewer" class="viewer"/></center>

</body>
</html>
__________________________________

En vosu remerciant par avance poru votre aide.

P.S.: désolé si mon code est posé "à l'arache", je n'ai pas trouvé d'option pour l'afficher autrement .

P.S.bis: j'accèpte aussi si vous avez d'autres suggestion de script dans le même genre (ou codé plus simplement), sachant que je désire tout de même conserver l'effet de rotation.

Merci à vous pour votre attention, Romantika
vendredi 20 février 2009 à 09:55:40 | Re : effet de rotation d'iamge avec script, et lien sur image

kazma

Administrateur CodeS-SourceS
Réponse acceptée !
bonjour
d'abord tu crée une variable comme pour les images qui contient les liens

var lien=["lien1.html","lien2.html",....etc]

ensuite tu rajoute la balise <a> comme je l'ai ecrit et a moins que je n'ai fait des erreurs sa devrait fonctionner

document.body.innerHTML+="<a href="+lien[i-1]+"><img id=i"+i+" src="+pict[i-1]+"  ((((onmouseover=\"vit=0\")))) ((((onmouseout=\"vit=0.01\")))) onmouseover=\"document.getElementById(\'viewer\').src=this.src\" class=imag onmouseout=rafrech>"</a>
vendredi 20 février 2009 à 11:53:03 | Re : effet de rotation d'iamge avec script, et lien sur image

RomantikA
Je te remercie beaucoup kazma. Ca fonctionne du tonnerre de dieu (comme on di ^^) tu m'enlève une grosse épine du pied car je commencé à craqur là. mais en fait il faut avouer, comme dans pratiquement tout les cas, que c'était pas plus compliqué... enfin quoi qu'il en soit, vu le niveau d'agacement que je commencé à avori là, je n'aurais pas pu trouver tout seul. Donc voila, même si sur ma page ya visiblement quelque erreur dont je ne connais pas la cause, même si j'ai du mal à régler la vitesse de rotation pour le onmouseover qui n'a pas l'air de fonctionner.... je te remercie sincèrement pour ton aide précieuse.

Pour Kazma hip hip hip??!!!!!! OURA !! ^^ merci beaucoup, bonne continuation à toi et bonne journée. Tu mérite le galon de helpeur ^^

Romantika
vendredi 20 février 2009 à 12:08:13 | Re : effet de rotation d'iamge avec script, et lien sur image

kazma

Administrateur CodeS-SourceS
++
vendredi 20 février 2009 à 12:27:07 | Re : effet de rotation d'iamge avec script, et lien sur image

Bul3

Membre Club
pas mieux que kazma...

>>même si sur ma page ya visiblement quelque erreur dont je ne connais pas la cause
_ ((((onmouseover=\"vit=0\"))))    pourquoi les (((( et )))) ?
_ pourquoi ((((onmouseout=\"vit=0.01\"))))  et onmouseout=rafrech
 ( et c'est quoi rafresh ? )
_ manque de " ou de ' !!!!
"<a href='"+lien[i-1]+"'><img id='i"+i+"'.... et le reste

Cordialement
[mon Site][M'écrire]Bul
vendredi 20 février 2009 à 14:41:27 | Re : effet de rotation d'iamge avec script, et lien sur image

RomantikA
bonjour Bul3,
tout d'abord merci de ton attention.
pour répondre, les ((( ))) paraissent inutile, mais pourtant si yen a pas... ça change tout visiblement. certe la vitesse de rotation est "respecté" mais le wiever ne fonctionne pas. Et pour etre franc, à force de voir du code de partout, je sature un peu... je vois même plus les fautes :s
Et logiquement le onmouseout et le onmouseover servent justement (logiquement) à programmer la vitesse de rotation. et logiquement le rafresh sert à rafraichir la page... enfin c'est ce qu'on m'a dit... donc bon. je ne dis pa que le code est juste, loin de là, surtou que c'est des bouts de code d'un peut tout les niveaux. du copié, de l'improvisé, du test.... donc forcément, ça doit rater en quelque part. mais vu que je ne suis pas non plus un habitué du JS... là je bloque.

Romantika
vendredi 20 février 2009 à 15:07:09 | Re : effet de rotation d'iamge avec script, et lien sur image

Bul3

Membre Club

>>((( ))) paraissent inutile, mais pourtant si yen a pas... ça change tout visiblement.
ce n'est même pas une syntaxe valide en html !
si on enlève, mais je ne comprend même pas pourquoi ça fonctionne,  c'est pareil,
vu de l'extérieur et si on teste avec ce que tu donnes
>>rafresh
ça n'existe pas an javascript

de toutes manières faire :
<balise ...onmouseover='traitement javascript'... onmouseover='autre traitement' ?????
essaye donc, par exemple :
<input type="text"
   onmouseover="alert('1');"
   value="exemple"
   onmouseover="alert('');" />
   
il faut aussi rectifier les erreurs html !
<balise id="id_voulu".... ou<balise id='id_voulu'.... et les autres
sinon, ça pose des soucis pour certains attributs
avec certains navigateurs

on a des aides possibles  :

NavigateursQuelques Explications
Chrome
contrôler page actuelle / Options pour développeurs
/ Console Javascript
FireFox
Outils / Console d'erreurs
      et mieux  : télécharger FireBug
Internet
Explorer
activer le deboggage : Outils/options Internet/Avancés
   dans la liste, sous "Navigation" : décocher
   o Afficher une notification de chaque erreur de script
   o Désactiver le débogage de Scripts (Internet Explorer)
      et mieux   : télécharger le Debogger IE
      voir aussi : DebugBar et Companion JS
K-Meleon
Outils / Console d'erreurs
Opera
Outils / Avancé / Console d'erreurs
Safari
Debug / Show JavaScript Console
 ° modifier Fichier com.apple.Safari.plist  situé dans le
 répertoire : Support:\Documents and Settings\utilisateur
                \Application Data\Apple Computer\Safari\Preferences\
   y ajouter    <key>IncludeDebugMenu</key>
                <true/>
vendredi 20 février 2009 à 15:09:05 | Re : effet de rotation d'iamge avec script, et lien sur image

Bul3

Membre Club
il faut lire :

<input type="text"
   onmouseover="alert('1');"
    value="exemple"
   onmouseover="alert('2');" />
   
   
vendredi 20 février 2009 à 16:15:36 | Re : effet de rotation d'iamge avec script, et lien sur image

RomantikA
re, j'ai essayé de tenir conte de tes remarques, et j'ai donc essayer de modifier quelques parties, mais dans l'ensemble cela reste "sans succes". le navigateur n'affiche plus d'erreur, mais je pense tout de même qu'il ya du boulot de correction à faire. malheureusement étant débutant dans ce domaine, j'ai déjà dépassé mes compétences, et toute tentatives de correction n'aboutissent qu'à des erreurs. Je pense donc que soit je vais devoir laisser mon code ainsi, soit je vais devoir abandoner ce projet trop complex pour mon cerveau car je n'ai malheureusement pas les qualités requises pour avancer dans le bon sens malgré ma motivation. Pour tout dire, j'ai même pas réussi à faire tout ce dont tu me parles. Le <input type="text"    onmouseover="alert('1');"    value="exemple"    onmouseover="alert('');" />  ... je n'arrive même plus à l'adapter... bref, je vais laisser ça tranquil parceque je sent qu'au bout du compte même le background d'arrière plan ne va plus s'afficher... lol

Pour info, j'ai supprimé les ((((( )))) et miracle!: ça tourne comme dab, et la rotation se bloque au onmouseover comme demandé; mais l'image n'apparait plus en wiever.... j'ai carément enlever les onmouseover et onmouseout,  et par miracle ça rebug, l'image s'affiche à nouveau, mais comme la logique le veut, la rotation ne se met pas en pause, alor je sais que ce qui cloche viens de cette partie... mais bon, je suis largué. Donc bon. voila.bref

Je te remercie néanmoins pour ton aide.
Romantika
vendredi 20 février 2009 à 16:38:08 | Re : effet de rotation d'iamge avec script, et lien sur image

Bul3

Membre Club
Pour tout dire, j'ai même pas réussi à faire tout ce dont tu me parles. Le
<input type="text"
    onmouseover="alert('1');"
    value="exemple"
    onmouseover="alert('2');" />  ... je n'arrive même plus à l'adapter..
ne pas adapter ! exécuter tel quel !
( 2 n'est jamais affiché ! )
tu as 2 onmouseover et 2 onmouseout... seuls les 1ers sont traités

1 2

Cette discussion est classée dans : images, style, image, math, getelementbyid

Répondre à ce message

Sujets en rapport avec ce message

Image-blinkeur... [ par Grand Mamamouchi ] Bonjour !je voudrais ecrire un image-blinkeur.Voici le chantier :<script ty probleme avec une fonction javascript + css [ par edelendil ] Voila, je dois créer un menu déroulant composé de deux tableaux le premier contient le titre de la rubrique et reste toujours visible le deuxieme con événement permanent [ par arnaultp ] Bonjour à tous!J'ai repris un script ici même qui représente une sorte de manège avec des icones. Ce script m'intéressant bien, j'ai voulu l'améliorer effet sur image [ par tales ] Bonjour,J'utilise  le script suivant pour avoir des images à des positions aléatoire: function move(id){   var o = document.getElementById(id);  problème caroussel [ par webide ] Bonjour,J'ais récupéré un script de caroussel. J'ais pu modifié l'affichage par contre lorqu'on cliques sur une miniature, elle apparait aggrandie au caroussel décalé [ par webide ] Bonjour,J'ais un petit souci avec un script caroussel en javascript.L'image centrale est décalée vers la droite par rapport au caroussel et ce quoique Commande Onclick agrandir image + afficher du texte [ par pharen ] bonjour à tous je souhaite réaliser une gallery photos ainsi les photos sont sur la page en petite taille. je click sur une photo et elle s'agrandit pb avec un formulaire select [ par ahah38 ] Bonjour, J'ai besoin d'aide sur un formulaire select. Je souhaite réaliser un carnet de route en utilisant un formulaire select. Les visiteurs pourron compatibilité javascript [ par camellion2 ] Bonjour a tous, Je suis novice en programmation et je me suis fait un petit site web pour me simplifier la vie au taf. Le problême c'est qu'au bureau image doublé dans mon script [ par Damslo ] Bonjour, voila,je vous explique mon petit soucis,si quelqu'un pouvait m'aider,ca serait tres sympa. je voudrais lors d'une fonction qui passerai de


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Water in the Beginning of the Grand Canyon
Photo Children Camping at Night in a Tent 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)