id anlegen

[Pauline]

Hallo!
Wie man ein Bild vergrößert und verkleinert, habe ich dank diesem Forum bereits herausgefunden:

<script type="text/javascript">
function machGross(){
 var ID = document.getElementById("bild"); // auf das Bild zugreifen
 ID.style.width = "200px";  //per style-Objekt auf CSS-Eigenschaften zugreifen und neue Größe festlegen
 ID.style.height = "150px"; //dito
}
function machKlein(){
 var ID = document.getElementById("bild");
 ID.style.width = "100px";
 ID.style.height = "75px";
}

</script>

und dann beim Bild die id angeben, und über onmouseover und onmouseout die Befehle aufrufen.

Wie aber lege ich eine id in .css an? Soll ich die Bilder bild 1, bild 2 nennen? Und wie ist dann die Schreibweise?

Ich bin absolut dankbar für eine Antwort!
Es gibt noch keine URL

Grüsse,
Pauline

[bleicher]

Grüße,
in CSS werden IDs mit # gekennzeichnet

also zB

img#xxx{}

wo xxx=id
mehr dazu könntest du recht einfach hier nachlesen
MFG
bleicher

[Pauline]

Hallo,

vielen Dank für die schnelle Nachricht!
Ja, habe ich schon gemacht, #id.
Wenn ich z.B. 7 Bilder habe, die die gewünschte Funktion ausführen sollen, muss ich diese 7 Bilder dann wie Du sagst benennen: img#bild {1} oder wie...
ich lese auch nochmal unter Deinem Link nach..
Und sag ich dann einfach im Quelltext von .css #id "bild"//?

Danke nochmals für eine Antwort!
Pauline

[bleicher]

Grüße,

Wenn ich z.B. 7 Bilder habe, die die gewünschte Funktion ausführen sollen, muss ich diese 7 Bilder dann wie Du sagst benennen: img#bild {1} oder wie...

nein - gleiches id darf nicht mehrmals vorkommen - jede id hat innerhalb eines documents einmalig zu sien - sonst wäre 3es unklar, welches bild genau man ansprechen sollte.

für mehrfachverwendung in JS nimm zB name für css "class"

ich lese auch nochmal unter Deinem Link nach..
Und sag ich dann einfach im Quelltext von .css #id "bild"//?

nein #bild

die iegentliche id kommt direkt nach der raute - ohne leerzeichen,
<http://de.selfhtml.org/css/formate/zentrale.htm#individualformate@title=Lies mal das>
MFG
bleicher

[Pauline]

Hallo Bleicher,
vielen Dank für die Nachricht!
Leider komm ich noch immer nicht weiter.
So hab ich das jetzt geschrieben, aber die Funktion wird nur für das zweite Bild ausgeführt.

<script type="text/javascript">
function machGross(){
 var ID = document.getElementById("img#class1"); // auf das Bild zugreifen
 ID.style.width = "200px";  //per style-Objekt auf CSS-Eigenschaften zugreifen und neue Größe festlegen
 ID.style.height = "150px"; //dito
}
function machKlein(){
 var ID = document.getElementById("img#class1");
 ID.style.width = "100px";
 ID.style.height = "75px";
}
function machGross(){
 var ID = document.getElementById("img#class2"); // auf das Bild zugreifen
 ID.style.width = "200px";  //per style-Objekt auf CSS-Eigenschaften zugreifen und neue Größe festlegen
 ID.style.height = "150px"; //dito
}
function machKlein(){
 var ID = document.getElementById("img#class2");
 ID.style.width = "100px";
 ID.style.height = "75px";
}

</script>
Die id-Schreibweise Deines Links von gestern habe ich ausprobiert, aber da ging gar nichts mehr, bzw. das gleiche Ergebnis: Bild img#class2 führt den Befehl auss!

Kann ich denn nicht sagen:"img#class1", "img#class2" usw, im Quelltext des HTML-Dokumentes und dann im body-bzw. Tabellenbereich eben mit
id="img#class1" aufrufen?

Ich habe im css-Ordner unter dem basis.css-Dokument die ids mit img#class1, img#class2 angegeben, aber ich krieg die id nicht richtig angelegt.

Vielen Dank für eine Hilfe!
Pauline

[ChrisB]

Hi,

So hab ich das jetzt geschrieben, aber die Funktion wird nur für das zweite Bild ausgeführt.

Du erstellst zwei Funktionen namens machGross und machKlein - und dann anschliessend beide mit genau den gleichen Namen noch mal. Es ist klar, dass dabei nur die letzteren "übrig" bleiben.

Wähle unterschiedliche Funktionsnamen - oder noch besser, beschäftige dich damit, wie man Funktionen mit Parametern ausstattet, so dass man nicht mehr zwei mal den gleichen Code schreiben muss, wenn man zwei mal das gleiche machen möchte - sondern nur die veränderlichen Daten beim Aufruf der Funktion übergibt.
http://de.selfhtml.org/javascript/sprache/funktionen.htm

MfG ChrisB

[bleicher]

Grüße,
mein Typp - verzichte gar auf id - ich würde sowas wie

  
  
function zoomIn(element){  
element.style.width="200px";  
element.style.height="100px";  
}  
  
function zoomOut(element){  
element.style.width="150px";  
element.style.height="75px";  
}  

  
<img src="bild.jpg" onMouseDown="zoomIn(this)" onMouseUp="zomOut(this)" alt="bla" style="width:150px; height:75px">  
  

ohne gewähr - nciht ausprobiert
MFG
bleicher