Sujet Précédent Sujet Suivant

Javascript /cartes graphiques

Fermé
patrick - 1 mars 2002 à 21:24
 patrick - 2 mars 2002 à 19:31
Bonjour,
je suis embourbé avec un pb de cartes graphiques non découpées sur Dreamweaver et je me demande si quelqu'un de costaud en ce domaine pourrait m'aider.
Voilà : j'ai crée deux image identiques en dimensions (784 x 467)que j'ai placées l'une au-dessus de l'autre grace aux calques de DreamWeaver. Jusque là : tout baigne ! J'ai délimité huits zones sensibles (là, ça commence à se gâter !) et avec les comportments "onMouseOver" et "on MouseOut" le but naturellement est que à l'endroit de chaque zone sensible, ça révèle l'autre petite partie immédiatement en dessous (mais d'une autre couleur). Le problème c'est que Dreamweaver génère du code javascript pour cela, mais insuffisant dans le cas d'une carte graphique complète non découpée et il faut apparemment rajouter à la main des complèments pour que cela fonctionne correctement. J'ai beau essayer de "compléter" avec ce qui me semble être du code correct, lorsque je clique sur une des zones sensibles, soit ça révèle l'autre image en entier (784 x 457) (c'est très beau, mais c'est pas le but !) soit ça renvoit à l'URL que j'ai indiqué sans faire l'effet désiré. Je ne sais pas si je suis assez clair.
Je suis disposé à en discuter avec quelqu'un et éventuellement à lui soumettre mon code et même les images.
Bye et merci d'avance car je suis là-dessus depuis hier soir (sans manger, sans boire, sans dormir.... !) je plaisante....à peine...si...je plaisante ...quand même...
Patrick

Je précise que compte tenu du graphisme des images, il m'est difficile de les découper symétriquement comme on me l'a suggéré sur des forums, c'est pour cela que je suis sur cette idée de carte graphique non découpée.
A voir également:

2 réponses

Réponse 1 / 2
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
2 mars 2002 à 16:26
Salut Patrick

Ton pb n'est pas simple et l'emploi de Flash serait peut être plus approprié.

Quoiqu'il en soit voici un (long) ex en Javascript qui répondra j'espère à ta question.


<html>
<head>

<style>
.hide {position:absolute; left:-5000px; overflow:hidden;}
</style>

<script language="JavaScript">
<!--



function ClipObject(dX,dY,sX,sY)
{
this.dX=dX || 0
this.dY=dY || 0
this.sX=sX || 0
this.sY=sY || 0
}
ClipObject.prototype=new DivObject

// Object qui va référence un layer <DIV> HTML positionner de manière absolue
function DivObject(id,x,y)
{
this.ref=window.document.getElementById(id);
this.clip=new ClipObject(0,0,0,0);
this.x=x || 0
this.y=y || 0
this.visible=false;
}


function divObject_hide()
{
this.ref.style.left="-5000px"
this.visible=false;
}
DivObject.prototype.hide=divObject_hide


function divObject_show()
{
this.setPos(this.x,this.y);
this.visible=true;
}
DivObject.prototype.show=divObject_show


// Définir un découpage pour l'objet
// x,y : coordonnées où la zone doit s'afficher
// si l'objet est contenu ds un autre <DIV> alors la position est relative au <DIV> parent
// dX, dY : coin haut gauche de départ pour la zone à définir
// sX, sY : largeur et hauteur de la zone
// Nota : si aucun décalage n'est nécessaire on doit avoir x=dX et y=dY

function divObject_setClip(x,y,dX,dY,sX,sY)
{
this.clip.dX=dX || 0
this.clip.dY=dY || 0
this.clip.sX=sX || 0
this.clip.sY=sY || 0

sX=this.clip.sX+this.clip.dX-1
sY=this.clip.sY+this.clip.dY-1

this.ref.style.clip="rect("+this.clip.dY+","+sX+","+sY+","+this.clip.dX+")";

// Recalcul des coordonnées pour tenir compte du décalage de la position de départ
// setPos() ou show() doit être appeler ensuite ...
this.x=x-dX
this.y=y-dY
}
DivObject.prototype.setClip=divObject_setClip



// Définir les dimensions de l'objet DIV
function divObject_setSize(sX,sY)
{
this.setWidth(sX)
this.setHeight(sY)
}
DivObject.prototype.setSize=divObject_setSize

// Définir la position absolue de l'objet DIV
function divObject_setPos(x,y)
{
this.setX(x)
this.setY(y)
this.visible=true;
}
DivObject.prototype.setPos=divObject_setPos

// Définir la largeur de l'objet DIV
function divObject_setWidth(sX)
{
this.ref.style.width=sX+"px"
}
DivObject.prototype.setWidth=divObject_setWidth

// Définir la hauteur de l'objet DIV
function divObject_setHeight(sY)
{
this.ref.style.height=sY+"px"
}
DivObject.prototype.setHeight=divObject_setHeight

// Définir la position horizontale de l'objet DIV
function divObject_setX(x)
{
this.x=x
this.ref.style.left=x+"px"
}
DivObject.prototype.setX=divObject_setX

// Définir la position verticale de l'objet DIV
function divObject_setY(y)
{
this.y=y
this.ref.style.top=y+"px"
}
DivObject.prototype.setY=divObject_setY



function Frame(id)
{
this.base=DivObject
this.base(id)

this.areas=new Array()

}
Frame.prototype=new DivObject("");


function frame_newArea(id)
{
return this.areas[this.areas.length]=new DivObject(id);

}
Frame.prototype.newArea=frame_newArea

function frame_showArea(idx)
{
area=this.areas[idx]
if (area.visible) return
area.show()
}
Frame.prototype.showArea=frame_showArea

function frame_hideArea(idx)
{
area=this.areas[idx]
if (!area.visible) return
area.hide()
}
Frame.prototype.hideArea=frame_hideArea


function load()
{
cadre=new Frame("cadre0");
cadre.setPos(0,50);



ref=cadre.newArea("elt0");
ref.setClip(0,0,0,0,100,100);

ref=cadre.newArea("elt1");
ref.setClip(100,0,0,0,100,100);
}


// -->
</script>




</head>
<body onload="load()">

<map name="map1">
<area href="#" shape="rect" coords="0,0,99,99" alt="Zone 0" onmouseover="cadre.showArea(0)" >
<area href="#" shape="rect" coords="100,0,199,99" alt="Zone 1" onmouseover="cadre.showArea(1)" >
</map>

<div id="cadre0" class=hide>
<img border=0 src="fond.jpg" usemap="#map1">

<div id="elt0" class=hide onmouseout="cadre.hideArea(0)">
<img border=0 src="zone1.jpg" >
</div>

<div id="elt1" class=hide onmouseout="cadre.hideArea(1)">
<img border=0 src="zone0.jpg" >
</div>

</div>


</body>
</html>


Pout tester tu copies cette page dans un répertoire dans lequel tu places 3 images que tu appelles :
fond.jpg (au moins 200x100)
zone0.jpg (au moins 100x100)
zone1.jpg (au moins 100x100)

Dans l'ex j'affiche l'image fond.jpg comme fond et je définis 2 zones clicable sur cette image de 100x100 à partir du coin haut gauche et qui se suivent.

Lorsque tu survoles la première zone j'affiche une partie de l'image zone0. jpg et pour la seconde une partie de l'image zone1.jpg

Nota : tu peux utiliser une seule image pour zone0.jpg et zone1.jpg : dans ce cas modifie le code .

Restriction : seule des zones rectangulaires peuvent être utilisées.
Ca ne marche qu'avec IE 5 ou + !

Voilà

Si tu as des questions n'hésite pas ...

@+
Philippe

[[  The Truth is Out There   ]]
0
patrick
2 mars 2002 à 19:31
OU la la ! Merci beaucoup ! je viens de rentrer chez moi et découvrir ton message.
Il va me falloir un peu de temps pour éplucher tout ce code car je ne suis pas un "javascripteur en chef " (je préfère faire du graphisme aux codes de programmation !!!) d'autant plus que mes deux images de 767 x 484 doivent avoir 8 zones sensibles, donc je ne suis pas au bout de mes peines....
Si je bloque, je me permettrai de te relancer...
Merci encore
Patrick
0
Réponse 2 / 2
PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
2 mars 2002 à 16:29
Ooops !

Supprime la ligne suivante dans le code :
ClipObject.prototype=new DivObject

Ca ne sert à rien !

@+
PHP

[[  The Truth is Out There   ]]
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Possible de mettre deux cartes graphiques différentes dans le même pc ?
Arnoxrodriguez -
Hyub -

8 réponses
Faire un echo dans un script JS
CorentinRoche -
CorentinRoche -

6 réponses