CHALLENGE : MENU FISHEYE POUR SITE HTML !

Fermé
babeloueb Messages postés 3 Date d'inscription jeudi 20 janvier 2011 Statut Membre Dernière intervention 20 janvier 2011 - 20 janv. 2011 à 15:54
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 - 21 janv. 2011 à 00:34
Bonjour,

je ne suis pas développeur.
Je n'ai réalisé que des sites en HTML avec qqs petites insertions en JAVASCRIPT piquées par-ci par-là, rien de bien méchant...

Cependant, j'aimerais que l'on me file un lien, un tuto bref qqch de concret et qui fonctionne.
Je souhaite créer un menu fisheye dans une page exclusivement en HTML !

J'ai lu pas mal de choses, ex :
http://interface.eyecon.ro/demos/fisheye.html#
http://forum.canalblog.com/jforum/posts/list/7774.page
etc etc mais les .zip donnent une page blanche et d'après ce que j'ai lu, c'était surtout pour du développement en PHP !

Est-ce possible en HTML?
Pourriez-vous m'aider en ce cas car c'est urgent.
Merci bcp à l'avance.

Numériquement,

Babeloueb

9 réponses

tartefion Messages postés 31 Date d'inscription vendredi 21 mai 2010 Statut Membre Dernière intervention 21 janvier 2011 7
20 janv. 2011 à 16:03
Salut, essaye sur ce lien
http://blog.websourcing.fr/webdesign-icondock-un-autre-script-jquery-pour-creer-des-menus-fish-eye/
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
Modifié par xamurai le 20/01/2011 à 16:15
tu peux le faire avec du javascript :

tu cree un tableaux avec les id des <img/ id="img_i"> et tu des <div id="div_img_i">

<div id="menu"> 
<div id="div_img_0" position="0"> 
   <img/ id="img_0">  
</div> 
<div id="div_img_1" position="1"> 
   <img/ id="img_1">  
</div> 
<div id="div_img_2" position="2"> 
   <img/ id="img_2">  
</div> 
</div> 


tu cree des fonctions onmouseover et onmouseout autour des div_img_i

et tu modifie les width des images: tag_image_i.style.width = "...px";

dans ton css les le div menu a son width = auto;
les div_img_i ont leurs width = auto ; et float = left / ou right;

tu definies seulement le width des images pour qu'il calcule automatiquement leur propre height


chaque fois qu'il y a un evenement: tu lis la position du tag et tu modifies le width de l'image dant le tag div_img_i et ceux aux allentour
0
Akronos Messages postés 140 Date d'inscription jeudi 6 janvier 2011 Statut Membre Dernière intervention 31 janvier 2011 32
20 janv. 2011 à 16:49
C'est quoi ce "/" en plein milieu de ta balise img?!

<img/ id="">  -->  <img id="" /> ?!
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
20 janv. 2011 à 16:58
oui
<img id="" />
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Akronos Messages postés 140 Date d'inscription jeudi 6 janvier 2011 Statut Membre Dernière intervention 31 janvier 2011 32
20 janv. 2011 à 17:00
Ok, j'ai cru que c'était voulu (car répété) et me suis donc demandé si j'avais loupé une étape dans l'évolution du HTML (hey ça fait 10 minutes que je cherche sur google).
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
20 janv. 2011 à 17:06
j'avais ecris <img/> puis me suis dit qu'avec le id dedans il comprendrais mieux de quoi je parle... en plus je suis au boulot donc d'autres projets plus coriaces à faire.
0
babeloueb Messages postés 3 Date d'inscription jeudi 20 janvier 2011 Statut Membre Dernière intervention 20 janvier 2011
20 janv. 2011 à 22:07
Merci pour les liens que j'ai bien essayé d'étudier de plus près...

Malheureusement, je nage dans les WC3C !!! ;-)
Et oui, ce qui peut paraître évident pour certains ne le sont pas toujours pour d'autres, c pour tout le monde pareil et dans tous les domaines, d'où l'intérêt des forums.

Quelques codes apparemment relativement simple à appliquer mais rien n'est expliqué, par ex : créez un fichier nommé "jquery.js" dans lequel tel code devra figurer, dans votre page, indiquer dans la balise head ceci, puis dans le body cela etc... Pour néophyte quoi !
L'idéal (pour moi), serait de me filer un index.html avec les fichiers nécessaires genre style.css, jquery.js etc que sais-je encore, qui fonctionnerait et qui me servira de base concrète afin que je puisse l'appliquer (dossier zippé par ex).
Pour info, ces menus ouvriront des pages html soit dans une iframe soit en blank.
Merci à l'avance. Je vous en serai très reconnaissant !
Bab
0
babeloueb Messages postés 3 Date d'inscription jeudi 20 janvier 2011 Statut Membre Dernière intervention 20 janvier 2011
20 janv. 2011 à 22:15
J'ai trouvé un exemple de ce que je voudrais exactement faire, mais dans un site html ! même les menus déroulants sont sympas (mais ce site est en php !! Aïe :-(
https://www.hoplie.com/fr
0
xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
21 janv. 2011 à 00:34
0