CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 29 13:42:42

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

Menu de voiture avec le DOM

Poser une question dans le forum ou lancer une discussion

Menu de voiture avec le DOM

mercredi 24 juin 2009 à 10:14:19 | Menu de voiture avec le DOM

sonialand

23 msg

salut tout le monde,
je suis entrain de developpe un menu de voiture (audi) avec le DOM.
J'ai plein d'erreurs que j'arrive pas a corriger, je souhaite avoir un peu d'aide. Voici le code:

(ca ne marchera peut etre pas correctement faute d'image!!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Audi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="./js/prototype.js"></script>

</head>

<style type="text/css">

*{
    font-family: Arial Unicode MS;
    color:#FFFFFF;
    margin:0px;
    padding:0px;
    font-size: 15px;
}

div#main{
    width: 400px;
    height: 234px;
    margin:0px;
    padding:0px;
    left: 0px;
    top: 0px;
    background-image:url(./images/background.jpg);
}

div#view_model{
    position:absolute;
    left:0px;
    top:0px;
    width: 400px;
    height: 235px;

}

div#helper{
    position:absolute;
    left:549px;
    top:218px;
    width: 86px;
    height: 37px;
    color:#FF3300;
    font-size: 12px;
}

div#boutton{
    position:absolute;
    left:0px;
    top:29px;
    width: 79px;
    height: 157px;
    z-index:1;
}

div#Ecke1{
    position:absolute;
    left:0px;
    top:28px;
    width: 54px;
    height: 88px;
    z-index:1;
}

div#Ecke2{
    position:absolute;
    left:345px;
    top:28px;
    width: 54px;
    height: 88px;
    z-index:1;
}

div#Ecke3{
    position:absolute;
    left:0px;
    top:114px;
    width: 54px;
    height: 88px;
    z-index:1;
}

div#Ecke4{
    position:absolute;
    left:346px;
    top:114px;
    width: 54px;
    height: 88px;
    z-index:1;
}

.focus{
    font-size:large;
    font-weight:bold;
    color:#CC0066;
}

</style>

<script type="text/javascript">

var currentElement_data;
var currentElement_view;
var depth;
var activeElement;

    function onLoad()
    {
        depth = 0;
        currentElement_data = $('data_model');
        currentElement_view = $('view_model');

        arrange_menuitems(currentElement_data, currentElement_view, 150 , 30 , 55);

        var temp = currentElement_view;
        changeactive(temp);
    }

    function load_graphic(Container, img_string, x, y, h, w)
    {
        var graphic_container = document.createElement("div");

        var img_url = "url("+img_string+")";

        graphic_container.style.backgroundImage = img_url;

        graphic_container.style.position = "absolute";
        graphic_container.style.top = y + "px";
        graphic_container.style.left = x + "px";
        graphic_container.style.height = h + "px";
        graphic_container.style.width= w + "px";

        Container.appendChild(graphic_container);
    }

    function arrange_menuitems(Element, Container, x , y , delta_y)
    {
        var children = Element.childElements();
        for(var i = 0; i<children.size(); i++)
        {
            var title = children[i].getAttribute('title');

            children[i].style.position = "absolute";
            children[i].style.width = 50 + "px";

            children[i].style.left = x +"px";

            var y_offset = delta_y;

            children[i].style.top = i * y + y_offset +"px";

            var newnode = children[i].cloneNode(true);
            var title_node= document.createTextNode(title);
            newnode.appendChild(title_node);
            Container.appendChild(newnode);
        }
    }
    function arrange_submenuitems(Element, Container, x , y , delta_y)
    {
        var children = Element.childElements();

        for(var i = 0; i<children.size(); i++)
        {
            var title = children[i].getAttribute('title');

            children[i].style.position = "absolute";
            children[i].style.width = 50 + "px";

            var y_offset = delta_y;

            if (i==0)
            {
            children[i].style.left = x +"px";
            children[i].style.top = y_offset +"px";
            }
            if (i==1)
            {
            children[i].style.left = 350 +"px";
            children[i].style.top = y_offset +"px";
            }

            if (i==2)
            {
            children[i].style.left = x +"px";
            children[i].style.top = 205 +"px";
            }
            if (i==3)
            {
            children[i].style.left = 350 +"px";
            children[i].style.top = 205 +"px";
            }


            var newnode = children[i].cloneNode(true);
            var title_node= document.createTextNode(title);
            newnode.appendChild(title_node);
            Container.appendChild(newnode);
        }
    }

    function show_current()
    {

        var container = document.createElement("div");

        arrange_menuitems(currentElement_data, container, 80 , 25 , 45);

        currentElement_view.appendChild(container);

        currentElement_view = container;
    }

        function show_current1()
    {

        var container1 = document.createElement("div");

        arrange_submenuitems(currentElement_data, container1, 0 , 30 , 5);

        currentElement_view.appendChild(container1);

        currentElement_view = container1;
    }

    function go_down(Element)
    {
        var children = currentElement_data.childElements();
        for(var i = 0; i<children.size(); i++)
        {
            if (Element.getAttribute('title') == children[i].getAttribute('title'))
            {
                currentElement_data = children[i];
            }
        }

        show_current();

        depth = depth+1;

        if(depth == 1)
        {

            if (Element.getAttribute('title') == "MP3")
                var img_string = "./images/MP3.png";
            if (Element.getAttribute('title') == "Radio")
                var img_string = "./images/Radio.png";
            if (Element.getAttribute('title') == "Navigation")
                var img_string = "./images/Navigation.png";
            if (Element.getAttribute('title') == "Telefon")
                var img_string = "./images/Telefon.png";
            if (Element.getAttribute('title') == "Car")
                var img_string = "./images/Car.png";
            load_graphic(currentElement_view, img_string, 0, 0, 234, 400);
            show_current1();
        }
    }

    function changeactive(newActive)
    {
        Element.removeClassName(activeElement, "active");
       Element.addClassName(newActive, "active");
       activeElement = newActive;
    }

    function go_up()
    {
        set_Keine_Ecke();
        if(depth <0) return;
        var to_remove = currentElement_view;
        currentElement_view = currentElement_view.up();
        to_remove.remove();
        currentElement_data = currentElement_data.up();
        depth = depth-1;

    }

    function set_rollover_boutton(Element)
    {
        var img = Element.getAttribute('rollover_boutton');
        var img_url = "url("+img+")";
        $('boutton').style.backgroundImage = img_url;
    }
    function set_leer_boutton(Element)
    {
        var img = Element.getAttribute('leer_boutton');
        var img_url = "url("+img+")";
        $('boutton').style.backgroundImage = img_url;
    }

function set_Ecke(Element)
    {

            var img = Element.getAttribute('Ecke1');
            var img_url = "url("+img+")";
            $('Ecke1').style.backgroundImage = img_url;

            var img = Element.getAttribute('Ecke2');
            var img_url = "url("+img+")";
            $('Ecke2').style.backgroundImage = img_url;

            var img = Element.getAttribute('Ecke3');
            var img_url = "url("+img+")";
            $('Ecke3').style.backgroundImage = img_url;

            var img = Element.getAttribute('Ecke4');
            var img_url = "url("+img+")";
            $('Ecke4').style.backgroundImage = img_url;

    }
    function set_Keine_Ecke()
    {
        var img = document.getAttribute('Keine_ecke');
        var img_url = "url("+img+")";
        $('Ecke4').style.backgroundImage = img_url;
    }

    var focusedElement;

    function changefocus(newFocus)
    {
        Element.removeClassName(focusedElement, "focus");
        Element.addClassName(newFocus, "focus");
        focusedElement = newFocus;
    }

</script>

<body onload = "onLoad()">

<div id="main"></div>

<div id="boutton"></div>
<div id="Ecke1"></div>
<div id="Ecke2"></div>
<div id="Ecke3"></div>
<div id="Ecke4"></div>

<div id="view_model"> </div>

<div id="data_model" style="display:none">
    <div title="MP3" onclick="go_down(this);" onmouseover="changefocus(this);">
        <div title="Laufwerk" Ecke1="./images/MP3_Ecke1.png" Keine_ecke="" style="color:#996633; font-weight:bold;" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);"></div>
        <div title="Quelle" Ecke2="./images/MP3_Ecke2.png" Keine_ecke="" style="color:#996633; font-weight:bold;" align="right" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);"></div>
        <div title="Manuell" Ecke3="./images/MP3_Ecke3.png" Keine_ecke="" style="color:#996633; font-weight:bold;" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);"></div>
        <div title="Klang  " Ecke4="./images/MP3_Ecke4.png" Keine_ecke="" style="color:#996633; font-weight:bold;" align="right" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);"></div>
    </div>
    <div title="Radio" onclick="go_down(this);" onmouseover="changefocus(this);">
        <div title="Speicher" Ecke1="./images/Radio_Ecke1.png" Keine_ecke="" style="color:#996633; font-weight:bold;" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);">
        </div>
        <div title="Band" align="right" Ecke2="./images/Radio_Ecke2.png" Keine_ecke="" style="color:#996633; font-weight:bold;" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);">
        <div title="FM(Ultrakurzwell)" rollover_boutton="./images/test_bouton1.gif" leer_boutton="" style="color:#FF6600" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);"></div>
        <div title="MW(Mittelwell)" rollover_boutton="./images/test_bouton2.gif" leer_boutton="" style="color:#FF6600" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);"></div>
        <div title="LW(Langwell)" rollover_boutton="./images/boutton3.png" leer_boutton="" style="color:#FF6600" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);"></div>
        </div>
        <div title="Manuell" Ecke3="./images/Radio_Ecke3.png" Keine_ecke="" style="color:#996633; font-weight:bold;" back_image="./images/Radio_Manuell.png" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);">
        </div>
        <div title="Klang" align="right" Ecke4="./images/Radio_Ecke4.png" Keine_ecke="" style="color:#996633; font-weight:bold;" back_image="./images/Radio_Klang.png" onclick="go_down(this); this.style.color='#FF6600'; set_Ecke(this);">
        <div title="Balance" rollover_boutton="./images/test_bouton1.gif" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);"></div>
        <div title="Fader" rollover_boutton="./images/test_bouton2.gif" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);"></div>
        <div title="Hören" rollover_boutton="./images/boutton3.png" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);"></div>
        <div title="Bässe" rollover_boutton="./images/boutton4.png" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);"></div>
        <div title="DSP" rollover_boutton="./images/boutton5.png" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);"></div>
        <div title="Lautstärkeeinstellungen" rollover_boutton="./images/boutton6.png" leer_boutton="" style="color:#FF6600" onmouseover="this.style.color='#FFFFFF'; set_rollover_boutton(this);" onmouseout="this.style.color='#FF6600'; set_leer_boutton(this);" ></div>
        </div>
    </div>
    <div title="Navigation" onclick="go_down(this);" onmouseover="changefocus(this);">
    <div title="Speicher" Ecke1="./images/Navigation_Ecke1.png" Keine_ecke="" style="color:#557FAA; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
    </div>
        <div title="Route" Ecke2="./images/Navigation_Ecke2.png" Keine_ecke="" align="right" style="color:#557FAA; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        </div>
        <div title="Nav-Info" Ecke3="./images/Navigation_Ecke3.png" Keine_ecke="" style="color:#557FAA; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        </div>
        <div title="Karte" Ecke4="./images/Navigation_Ecke4.png" Keine_ecke="" align="right" style="color:#557FAA; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        </div>
    </div>
    <div title="Telefon"onclick="go_down(this);" onmouseover="changefocus(this);">
        <div title="Speicher" Ecke1="./images/Telefon_Ecke1.png" Keine_ecke="" style="color:#669966; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        <div title="Gewählte Nummern" style="color:#333333"></div>
        <div title="Mailbox anrufen" style="color:#333333"></div>
        <div title="Adressbuch" onmouseout="this.style.color='#00CC00'" onmouseover="this.style.color='#FFFFFF'"></div>
        <div title="Telefonbuch" onmouseout="this.style.color='#00CC00'" onmouseover="this.style.color='#FFFFFF'"></div>
        <div title="Angenommene Anrufe" style="color:#333333"></div>
        <div title="Anrufe in Abwesenheit" style="color:#333333"></div>
        </div>
        <div title="">
        </div>
        <div title1="Auflegen" Ecke3="./images/Telefon_Ecke3.png" Keine_ecke="" style="color:#669966; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        </div>
        <div title="Wählen" Ecke4="./images/Telefon_Ecke4.png" Keine_ecke="" align="right" style="color:#669966; font-weight:bold;" onclick="go_down(this); set_Ecke(this);">
        </div>
    </div>
    <div title="Car" onclick="go_down(this);" onmouseover="changefocus(this);">
    </div>
</div>
    </div>
    </div>

</div>

<div id="helper">
<input type="button" name="test1" value="go_up" onclick="go_up()"></input>
</div>

</body>
</html>

mercredi 24 juin 2009 à 11:40:01 | Re : Menu de voiture avec le DOM

kankrelune

77 msg

361 msg CS

Tu as tout un tas d'erreur c'est bien mais où ? à quelle ligne ? à quel moment ? quelle fonction ? les message des erreurs ?

On va pas se palucher tout le code ligne par ligne... .. . ;o)

@ tchaOo°

mercredi 24 juin 2009 à 13:23:01 | Re : Menu de voiture avec le DOM

sonialand

23 msg

j'ai des problemes dans les fonctions go_down et go_up qui permettent de parcourir le DOM!
j'ai tjr des erreurs d'affichage

Cette discussion est classée dans : style, url, var, element, img

Répondre à ce message

Sujets en rapport avec ce message

CONTROLE SUR IMAGE EXTERNE / URL [ par Designotik_51 ] Salut tout le monde, g un problème qui me prend le chou depuis 2 jours.J'ai un formulaire composé de différents champs dont un qui correspond a une ad Petits problèmes [ par zzzzzz ] Salutdéja j'aimerai pouvoir configuré le style de mes icones dans plusieurs conditions. attente toucher normal ect...j'ai fait :BODY{ cursor:url("Autr passage parametres par url [ par aegis64fr ] bonjourje bute sur un problème Je m'explique:j'utilise des cadres: Framegauche un menu avec des boutons qui m'affiche une page dans Framecentre ( pag Vends Graveur [ par Graveur Saler ] Graveur Philips CDD3610 à 190F frais de port comprisC.Boisseau compter le nombre de radio button [ par misterdarth ] Bonjour,Lors de la saisie d'un formulaire, je cherche à tester certains champs afin de m'assurer que l'utilisateur n'a pas mis n'importe quoi.Dans ce Menu click droit FireFox [ par frizmout ] J'ai un très léger problème avec mon script de menu par click droit sous Firefox, à savoir que les menus sont décalés vers la droite... Alors que ça m déplacer un div [ par jonguignolo ] yop yop all je veux déplacer un div de x0 à x1 avec nb_img a intervalle temps. grace au déclenchement de timer au click sur le bouton. le ik c'est que Lien image dynamique ? [ par rezan16000 ] Bonjour, j'aurais faire une création avec le . Pour exemple : function choix() { var URL = "http://www.nomdedomaine.com ptit prob avec onMouseOver et onMousedown [ par destiny ] voila le code qui est dans un boucle php : " style="backg Feuilles de style [ par mathieumg ] Bonjour j'aimerais faire une page avec différentes sortes de lien et de mousevers mais je ne sais pas comment. Je crois qu'il faut utiliser les feuill

Livres en rapport

Aide-mémoire CSS 2

HTML

Programmation VBScript et CSS

CSS

Tous les livres pour Style, Url, Var, Element, Img

Nos sponsors

Derniers Blogs

POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante

JOYEUX ANNIVERSAIRE NIX par ebartsoft

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

Forum

RE : UTILISER UN .JS par jopop

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Optimisation d-un site internet
Budget : 600€
Finalisation d-un reseau social
Budget : 4 000€
Recherche formation webmaster - createur de site internet
Budget : 3 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP