Id über Parameter senden

HTML 4 YOU · 24 Juni 2010

Hey Leute,

ich hab mal wieder ein Problem, und zwar möchte ich, dass wenn man mit dem mauszeiger über Bilder geht, diese größer werden und wenn man wieder weg geht, die wieder kleiner werden.
Das habe ich auch schon hinbekommen, nur will ich jetzt nicht für jedes Bild (die sind neben einander) eine neue funktion machen, sondern eine, die immer nur das Bild vergrößert, wo man drübergeht. Das bekomme ich aber nicht hin.
Ich habe mir überlegt die Id des Bildes (wo man mit der maus drüberfährt) über Parameter weiter zu geben, doch iwie funktioniert das nicht. Hier meine Quellcodes:

(hab alles unwichtige rausgehauen)

index.html:

HTML:

<div id="content">

                   <img src="../images/iPhone App Icon Gr&uuml;n.png" width="60" height="60" id="AppIcon1" onmouseover="start_vergr('AppIcon1')" onmouseout="start_verkl('AppIcon1')" style="margin-top: 20px; margin-left: 130px; position: fixed;" /> <br />
                   <img src="../images/iPhone App Icon Rot.png" width="60" height="60" id="AppIcon2" onmouseover="start_vergr('AppIcon2')" onmouseout="start_verkl('AppIcon2')" style="margin-top: 80px; margin-left: 20px; position: fixed;" />               

</div>

Der JavaScript Code:

Code:

        var img_groesse = 60;         // Will ich noch durch img.style.width o. ä. ersetzen
        var vergr = 0;           // Definiert als globale Variable
        var verkl = 0;           //      "     "     "        "

        function start_vergr(AppId) { window.clearInterval(verkl); vergr = window.setInterval('icon_vergr(AppId)', 20); }
        function start_verkl(AppId) { window.clearInterval(vergr); verkl = window.setInterval('icon_verkl(AppId)', 1); }

        function icon_vergr(AppId) {

            if(img_groesse < 80) {
                var img = document.getElementById(AppId);
                img.style.width = img_groesse + "px";
                img.style.height = img_groesse + "px";
                img_groesse ++;
            } if(img_groesse == 60) {
                window.clearInterval(vergr);
            }


        }

        function icon_verkl(AppId) {
            if(img_groesse > 60) {
                var img = document.getElementById(AppId);
                img.style.width = img_groesse + "px";
                img.style.height = img_groesse + "px";
                img_groesse --;
            } if(img_groesse == 60) {
                window.clearInterval(verkl);
            }
       }

Hoffe ihr könnt mir weiterhelfen. Wenn jemand mein Problem nicht verstanden hat, dann mäge er es bitte sagen.

----------------------------------------------------------------
EDIT: Sry wegen der Formatierung, ist iwie etwas komisch geworden

crash · 24 Juni 2010

HTML:

onmouseover="start_vergr(this.id)"

Wobei du auch gleich this übergeben kannst, denn das ist bereits das Bild.

Gilles · 25 Juni 2010

Ich weiss nicht wie das hier von Anderen gesehen wird, aber ich finde es immer gut Javascript komplett vom HTML zu trennen.
In deinem Falle die mouseover und mouseout Attribute nicht im HTML zu setzen. Soll das denn für alle Bilder gelten?
Falls ja hier nur mal ein Beispiel:

Code:

// Alle Bilder auslesen
var images = document.getElementsByTagName("img");

// Für jedes Bild die Eventhandler setzen
for(var i=0; i < images.length; i++) {

  // Einzelnes Bild
  var image = images[i];

  image.onmouseover = function() {
    icon_verg(this.id);
  };

  image.onmouseout = function() {
    icon_verkl(this.id);
   };

}

Sieht schöner aus Und lässt sich flexibler einsetzen wie ich finde.
Das einzige was du dafür wissen musst ist der teil wo die Bilder auswählst. Wenn du nur die Bilder innerhalbdes divs mit der id content haben willst geht das auch so:

Code:

var content = document.getElementById("content");
var images = content.getElementsByTagName("img");

Man muss sich nur ein wenig mit den DOM-Selektoren auskennen dafür. Hoffe das hilft ein wenig

HTML 4 YOU · 25 Juni 2010

@Crash:

Danke, ist sehr hilfreich.

@Gilles:

Danke, ich finde auch, dass das so sauberer aussieht, weil der <img> Tag dann nicht so lang ist.

Ausserdem Danke für den Tipp mit

Code:

var content = document.getElementById("content");
var images = content.getElementsByTagName("img");

hat mir ebenfalls sehr geholfen.

Habe meinen Quellcode jetzt überarbeitet, er sieht jetzt so aus:

HTML:

<div id="content">

    <div id="alt-nav">
	<img src="http://www.html.de/images/iPhone App Icon Gr&uuml;n.png" width="60" height="60" id="AppIcon1" style="margin-top: 20px; margin-left: 130px; position: fixed;" />
        <img src="http://www.html.de/images/iPhone App Icon Rot.png" width="60" height="60" id="AppIcon2" style="margin-top: 90px; margin-left: 35px; position: fixed;" />
        <img src="http://www.html.de/images/iPhone App Icon Blau.png" width="60" height="60" id="AppIcon3" style="margin-top: 160px; margin-left: 130px; position: fixed;" />
        <img src="http://www.html.de/images/iPhone App Icon Orange.png" width="60" height="60" id="AppIcon4" style="margin-top: 90px; margin-left: 225px; position: fixed;" />
    </div>

</div>

und die Script.js:

Code:

var alt_nav = document.getElementById('alt-nav');
var images = alt_nav.getElementsByTagName('img');      // Alle Bilder auslesen


for(var i=0; i < images.length; i++) {                 // Für jedes Bild die Eventhandler setzen

  var image = images[i];                               // Einzelnes Bild

  image.onmouseover = function() {
    start_verg(this.id);
  };

  image.onmouseout = function() {
    start_verkl(this.id);
   };

}

var img_groesse = images[0].style.width;
var vergr = 0;                                         // Definiert als globale Variable
var verkl = 0;                                         //      "     "     "        "

function start_vergr(AppId) { window.clearInterval(verkl); vergr = window.setInterval('icon_vergr(AppId)', 20); }
function start_verkl(AppId) { window.clearInterval(vergr); verkl = window.setInterval('icon_verkl(AppId)', 0.5); }

function icon_vergr(AppId) {

    if(img_groesse < 80) {
        var img = document.getElementById(AppId);
        img.style.width = img_groesse + "px";
        img.style.height = img_groesse + "px";
        img_groesse ++;
    } if(img_groesse == 60) {
        window.clearInterval(vergr);
    }


}

function icon_verkl(AppId) {
    if(img_groesse > 60) {
        var img = document.getElementById(AppId);
        img.style.width = img_groesse + "px";
        img.style.height = img_groesse + "px";
        img_groesse --;
    } if(img_groesse == 60) {
        window.clearInterval(verkl);
    }
}

Das Problem: es funktioniert immer noch nicht :(

struppi · 25 Juni 2010

Was steht in der Fehlerkonsole?

HTML 4 YOU · 25 Juni 2010

da steht immer: "alt_nav is null" was aber eigenlich nicht sein kann

Ich hab die divs, die da drin sind (#main -> #content -> #alt-nav) alle ebenfalls mit der getElementById Methode so halt, ne?! ;), aber dann steht da: "main is null"... voll komisch

hier der Quellcode zum besseren verständniss:

Code:

var main = document.getElementById('main');
var content = main.getElementById('content');
var alt_nav = main.content.getElementById('alt-nav');
var images = main.content.alt_nav.getElementsByTagName('img');      // Alle Bilder auslesen

der html aufbau:

HTML:

<html>

    <head>
    </head>

    <body>


        <div id="header">
        </div>


        <div id="main">
            
            <div id="content>
                <div id="alt-nav">
                </div>
            </div>

         </div>

     
        <div id="footer">
        </div>


    </body>

</html>

crash · 25 Juni 2010

getElementById ist eine Methode des Document-Objects; die gibt's nicht für HTMLElement, wie getElementsByTagName. Würde auch keinen Sinn ergeben, denn eine ID ist eindeutig.

Code:

var main = document.getElementById('main');
var content = document.getElementById('content');
var alt_nav = document.getElementById('alt-nav');

HTML 4 YOU · 25 Juni 2010

geht das auch nicht bei getElementsByTagName??
weil wieso sagt die Fehlerkonsole bei dem Code:

Code:

var alt_nav = document.getElementById('alt-nav');
var images = alt_nav.getElementsByTagName('img');      // Alle Bilder auslesen

ebenfalls "alt_nav is null"?

crash · 25 Juni 2010

getElementsByTagName und getElementsByClassName sind für alle Elemente verfügbar.

evtl. das fehlende "?

HTML:

<div id="content><!-- hier -->
                <div id="alt-nav">
                </div>
            </div>

HTML 4 YOU · 25 Juni 2010

nene, damit hat das nichts zu tun, ich hab den aufbau mit der hand geschrieben, weil mein quelltext ja nicht leer ist und da ist mir der fehler wohl passiert, aber im original ist dies nicht der fall. ;)

crash · 25 Juni 2010

Existiert die ID wirklich? Ist das DOM denn schon bereit?

HTML 4 YOU · 25 Juni 2010

ja natürlich existiert die ID wirklich, ich hab sie auch schon aus dem original kopiert und darein gesetzt, aber es funktioniert nicht.
Was meinst du mit "Ist das DOM denn schon bereit"?

crash · 25 Juni 2010

Wird das ganze bei onload bzw. DOMContentLoaded abgefragt?

HTML 4 YOU · 25 Juni 2010

beim laden der Seite bzw. des Scriptes. Ich glaub ich post mal die ganze Seite.

HTML:

<!DOCTYPE HTML>

<html>

    <head>

        <title>m-remy.de - Startseite</title>

        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        <link rel="stylesheet" type="text/css" href="../styles/Style.css" media="all" />

        <script language="javascript" type="text/javascript" src="../scripts/Scripts.js"></script>

        <!--[if IE]><script language="javascript" type="text/javascript" src="../scripts/IE.js"></script><![endif]-->


        <!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="../styles/Style_lte_IE_7.css" media="all"><![endif]-->

    </head>


    <body>


        <div id="header-start">


            <div id="header-start-content">

                <h3>Herzlich Willkommen auf meiner Homepage</h3>

            </div>


        </div>





        <div id="main">



            <div id="sidebar">

                <ul id="nav-bar">

                    <li><a href="http://localhost/Homepage/m-remy.de%20s/Original/html/?page=index">Startseite</a></li>
                    <li id="untermenu"><a href="#">Schwebebahnr&auml;tsel</a>
                        <ul>
                            <li><a href="#">Aktuelles</a></li>
                            <li><a href="#">Gewinner</a></li>
                        </ul>
                    </li>
                    <li id="untermenu"><a href="#">Hobbys</a>
                        <ul>
                            <li><a href="#">Motorrad</a></li>
                            <li><a href="#">Apple</a></li>
                            <li><a href="#">Geocaching</a></li>
                            <li><a href="#">??</a></li>
                        </ul>
                    </li>
                    <li><a href="http://localhost/Homepage/m-remy.de%20s/Original/html/?page=kontakt">Kontakt</a></li>

                </ul>



                <ul id="comments" class="border">

                    <h4>Hinweise</h4>

                 <!--[if lte IE 7]>
                    <p>&bull; Sie benutzen eine veraltete Version des Internet Explorers, es kann zu starken Darstellungsproblemen auf dieser Seite kommen.<br /><br /><b>&bull; Optimale Darstellung ab Firefox 3.6, Google Chrome 5, Opera 10.53 oder Safari 4</b><br /><br /></p>
                 <![endif]-->

                 <!--[if gte IE 8]>
                    <p>&bull; Sie benutzen den Internet Explorer, es kann zu Darstellungsproblemen auf dieser Seite kommen.<br /><br /><b>&bull; Optimale Darstellung ab Firefox 3.6, Google Chrome 5, Opera 10.53 oder Safari 4</b><br /><br /></p>
                 <![endif]-->

                 <p id="JsHinweis">&bull; Sie haben kein Javascript aktiviert, es k&ouml;nnen Fehler auftreten.<br /><br /></p>

                </ul>


            </div>




            <div id="content">

               <div id="alt-nav">
                   <img src="../images/iPhone App Icon Gr&uuml;n.png" width="60" height="60" id="AppIcon1" style="margin-top: 20px; margin-left: 130px; position: fixed;" />
                   <img src="../images/iPhone App Icon Rot.png" width="60" height="60" id="AppIcon2" style="margin-top: 90px; margin-left: 35px; position: fixed;" />
                   <img src="../images/iPhone App Icon Blau.png" width="60" height="60" id="AppIcon3" style="margin-top: 160px; margin-left: 130px; position: fixed;" />
                   <img src="../images/iPhone App Icon Orange.png" width="60" height="60" id="AppIcon4" style="margin-top: 90px; margin-left: 225px; position: fixed;" />
                </div>

            </div>



        </div>




        <div id="footer">

        </div>



    </body>

</html>

Hier die Scripts.js

Code:

document.write("<style type='text\/css'>#JsHinweis {display: none;}  #comments {display: none}<\/style>");


var alt_nav = document.getElementById('alt-nav');
var images = alt_nav.getElementsByTagName('img');      // Alle Bilder auslesen


for(var i=0; i < images.length; i++) {                 // Für jedes Bild die Eventhandler setzen

  var image = images[i];                               // Einzelnes Bild

  image.onmouseover = function() {
    start_verg(this.id);
  };

  image.onmouseout = function() {
    start_verkl(this.id);
   };

}

var img_groesse = images[0].style.width;
var vergr = 0;                                         // Definiert als globale Variable
var verkl = 0;                                         //      "     "     "        "

function start_vergr(AppId) { window.clearInterval(verkl); vergr = window.setInterval('icon_vergr(AppId)', 20); }
function start_verkl(AppId) { window.clearInterval(vergr); verkl = window.setInterval('icon_verkl(AppId)', 0.5); }

function icon_vergr(AppId) {

    if(img_groesse < 80) {
        var img = document.getElementById(AppId);
        img.style.width = img_groesse + "px";
        img.style.height = img_groesse + "px";
        img_groesse ++;
    } if(img_groesse == 60) {
        window.clearInterval(vergr);
    }


}

function icon_verkl(AppId) {
    if(img_groesse > 60) {
        var img = document.getElementById(AppId);
        img.style.width = img_groesse + "px";
        img.style.height = img_groesse + "px";
        img_groesse --;
    } if(img_groesse == 60) {
        window.clearInterval(verkl);
    }
}

crash · 25 Juni 2010

Da ist das Element mit der ID noch nicht bekannt. Du kannst es erst bei onload haben.

HTML 4 YOU · 25 Juni 2010

Das hab ich mir schon fast gedacht...
Hab jetzt die einbinung mittels <sciript>-Tag ans Ende der Seite geschrieben, so funktioniert es, jedoch sagt mir die Fehlerkonsole jetzt: "AppId is not defined" und zwar auf Zeile 27.

Hier sind Zeilen 26, 27:

Code:

function start_vergr(AppId) { window.clearInterval(verkl); vergr = window.setInterval('icon_vergr(AppId)', 20); }
function start_verkl(AppId) { window.clearInterval(vergr); verkl = window.setInterval('icon_verkl(AppId)', 0.5); }

Komisch ist nun, dass es den Fehler in der Zeile 27 ( function start_verkl() ) gibt, jedoch nicht auf Zeile 26, oder den anderen Funktionen..

Weis jemand eine Lösung?

HTML 4 YOU · 25 Juni 2010

Ich habe den Code mal entzerrt und festgestellt, dass es an diesem Teil liegt:

Code:

vergr = window.setInterval('icon_vergr(AppId)', 20);

bzw.

Code:

verkl = window.setInterval('icon_verkl(AppId)', 0.5);

Die Fehlerkonsole sagt: "AppId is not defined", d. h., dass die Funktion entweder den Parameter nicht erkannt hat oder das HTML die Variable in den ' ' nicht erkennt.

Weiß jemand da weiter?

crash · 25 Juni 2010

Kommt davon, wenn man Strings bei setInterval/setTimeout benutzt. ;)
Der String wird geevalt und dabei geht die AppId verloren (er sucht sie sicher in window).

Code:

function start_vergr(AppId) { window.clearInterval(verkl); vergr = window.setInterval(function () { icon_vergr(AppId) }, 20); }
function start_verkl(AppId) { window.clearInterval(vergr); verkl = window.setInterval(function () { icon_verkl(AppId) }, 0.5); }

Hier ist AppId geclosured.

HTML 4 YOU · 25 Juni 2010

Das habe ich mir auch schon zusammengereimt, kann ich das ganze nicht in einer globalen Variable speichern und diese dann in die () von icon_vergr schreiben? oder erkennt er auch keine globalen Variablen?

crash · 25 Juni 2010

Alles was du als Globals ablegt, kannst du nur einmal verwenden. Du musst für jedes IMG die Größe, die Interval-ID und die ID speichern.

Id über Parameter senden

Neues Mitglied

Neues Mitglied

Blogger

Neues Mitglied

struppi

Guest

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied