Netz-Treff - Bildgröße per javascript ändern

#263110

Mike_R

Rosenheim,
09.03.2011, 23:25:32

Bildgröße per javascript ändern (web.design)

Hi,
diesmal hab ich, so hoffe ich, nur ein kleines Problem, für das ich trotz intensiver Recherche keinen passenden Code gefunden habe. Grundsätzlich müsste es aber doch möglich sein, die Bildgröße zu ändern (beim mouseover soll das neue Bild eine andere \'width\' bekommen) oder?

Zunächst wird das Bild gewechselt:
document.getElementById(ident).src = newpicSw[z].src;

Ich habe nun zunächst ohne eine Variable, die dann übergeben werden soll, versucht, die Bildgröße zu beeinflussen, aber diese

document.getElementById(ident).width = \'150\';
document.getElementById(ident).width = \'150px\';
document.getElementById(ident).width:150;

und zahllose andere Varianten, brachten keinen Erfolg, d.h. der nachfolgende Code wurde dann auch nicht mehr berücksichtigt. Wäre für die entspr. Codezeile, sofern es überhaupt möglich ist, sehr dankbar.

Mike_R

#263112

MudGuard

München,
09.03.2011, 23:34:38

@ Mike_R

Bildgröße per javascript ändern

antworten

> Hi,
> diesmal hab ich, so hoffe ich, nur ein kleines Problem, für das ich trotz
> intensiver Recherche keinen passenden Code gefunden habe. Grundsätzlich
> müsste es aber doch möglich sein, die Bildgröße zu ändern (beim mouseover
> soll das neue Bild eine andere \'width\' bekommen) oder?
>
> Zunächst wird das Bild gewechselt:
> document.getElementById(ident).src = newpicSw[z].src;
>
> Ich habe nun zunächst ohne eine Variable, die dann übergeben werden soll,
> versucht, die Bildgröße zu beeinflussen, aber diese
>
> document.getElementById(ident).width = \'150\';

Sollte funktionieren - es sei denn, die Bildgröße ist per CSS vorgegeben (CSS hat höhere Priorität als die entsprechenden HTML-Attribute.

> document.getElementById(ident).width = \'150px\';

ist inhaltlich falsch - Du weist hier dem Attribut einen Wert zu - und bei HTML ist die Einheit bei width oder height immer Pixel, im Attribut wird nur der Zahlenwert angegeben.

> document.getElementById(ident).width:150;

Das ist syntaktisch falsch. In Javascript erfolgt eine Zuweisung per =, nicht per :.
Der Doppelpunkt trennt im CSS Eigenschaft und Wert. Im CSS wäre das aber auch falsch, da bei Längenangaben (außer 0) immer eine Einheit angegeben werden muß.

Ich schlage vor:

document.getElementById(ident).style.width = \'150px\';

--

MudGuard
O-o-ostern

#263115

Mike_R

Rosenheim,
10.03.2011, 00:06:24

@ MudGuard

Bildgröße per javascript ändern

antworten

Vielen Dank für die superschnellen Antworten.

Hab nun auch mit \'style\' alles Mögliche ausprobiert, aber weder

> document.getElementById(ident).style.width = \'150px\';

noch

> document.getElementById(ident).style.width = \'150\';

noch

> document.getElementById(ident).style.width = 150;

brachten einen Erfolg. Erst wenn ich die besagte Zeile wieder auskommentiere, wird der nachfolgende Code wieder berücksichtigt, was doch besagt, dass die Zeile syntaxmäßig als falsch interpretiert wird. Sehe ich das so richtig?

Mike_R

#263116 Johann [Gast] 10.03.2011, 00:36:22 @ Mike_R	Bildgröße per javascript ändern antworten
	und was steht in der Javascript-Konsole?

#263127

MudGuard

München,
10.03.2011, 08:54:26

@ Mike_R

Bildgröße per javascript ändern

antworten

> Erst wenn ich die besagte Zeile wieder
> auskommentiere, wird der nachfolgende Code wieder berücksichtigt, was doch
> besagt, dass die Zeile syntaxmäßig als falsch interpretiert wird. Sehe ich
> das so richtig?

Nein.
Wäre der Code syntaktisch falsch, würde der gesamte Code dieses Script-Elements nicht ausgeführt.

Wenn der Code vorher ausgeführt wird, der danach aber nicht, dann gibt es vermutlich kein Element mit der Id, deren Wert in der Variable indent steht.
Dann würde versucht, einem nicht-existenten (null) Element eine Eigenschaft zuzuweisen, was scheitern muß - Script-Abbruch.

Aber das steht ja dann in der Javascript-Konsole.

--

MudGuard
O-o-ostern

#263143

Mike_R

Rosenheim,
10.03.2011, 13:19:24

@ MudGuard

Bildgröße per javascript ändern

antworten

Was wäre ich ohne die treuen Helfer der netztreff-Gemeinde!
Vielen Dank für die vielen Beiträge. Ein bisschen tröstet mich, dass es scheinbar doch keine so ganz einfache Thematik ist, nachdem es da auch unter den Experten unterschiedliche Ansichten gibt. Also das Problem mit \'width\' ist jetzt heboben. (Irgendwo hatte ich da einen Wurm mit einer falschen Klammer drin - wenn\'s gegen Mitternacht geht, sollte man auch vorher aufhören!!)
Aber kaum ist eine Hürde genommen, taucht schon die nächste auf, nämlich mit \'style.left\', das nun hartnäckig ignoriert wird. Ich dachte, dass ich das nun genauso mit

document.getElementById(ident).style.left = \'-41px\';

lösen könnte, aber es erfolgt keine Reaktion darauf. (Auch nicht wenn ich das \'style\' weglasse!). Wenn ich mir das mit

alert(document.getElementById(ident).style.left);

zeigen lasse, erscheint die \'-41\'.

In der Annahme, dass die \'left-Angaben\' in der CSS-Datei stören könnten, hab ich alle diesbezüglichen Angaben versuchsweise auskommentiert, was aber auch nichts brachte.
Bei meinen google-Recherchen bin ich auf einen Kommentar gestoßen, wo jemand meinte, dass Änderungen ignoriert würden, wenn im CSS \'position\' nicht auf \'absolute\' eingestellt sei.
Bevor ich das versuche, würde ich gern wissen, ob diese Ansicht stimmt, denn das würde in meinem Code eine Menge an Abänderungen verursachen.

(Natürlich hab ich auch in der CSS-Datei - unabhängig jetzt vom javasript-Code - mit \':hover\' mein Glück versucht, ebenfalls erfolglos.)

Mike_R

#263145

MudGuard

München,
10.03.2011, 13:30:40

@ Mike_R

Bildgröße per javascript ändern

antworten

> document.getElementById(ident).style.left = \'-41px\';
> lösen könnte, aber es erfolgt keine Reaktion darauf.

Dann ist das Element vermutlich nicht positioniert.

> (Auch nicht wenn ich
> das \'style\' weglasse!).

Wie ich schon schrieb: wildes Rumraten bringt\'s nicht.
Da es kein HTML-Attribut namens left gibt, kann das gar nicht funktionieren.

> alert(document.getElementById(ident).style.left);
> zeigen lasse, erscheint die \'-41\'.

Wirklich? Da sollte aber \'-41px\' rauskommen.

> Bei meinen google-Recherchen bin ich auf einen Kommentar gestoßen,

Du hättest nur diesen Thread aufmerksam lesen müssen, z.B. meine Antwort an d-fens (IIRC).

> wo
> jemand meinte, dass Änderungen ignoriert würden, wenn im CSS \'position\'
> nicht auf \'absolute\' eingestellt sei.

Das ist falsch.
Angaben zu left werden nur für positionierte Elemente berücksichtigt.
Es gibt aber mehr Werte als nur \'absolute\' für die position, die dafür sorgen, daß das Element als positioniert gilt. \'fixed\' oder \'relative\' zum Beispiel.

> Bevor ich das versuche, würde ich gern wissen, ob diese Ansicht stimmt,

nein, siehe oben.

> denn das würde in meinem Code eine Menge an Abänderungen verursachen.
> (Natürlich hab ich auch in der CSS-Datei - unabhängig jetzt vom
> javasript-Code - mit \':hover\' mein Glück versucht, ebenfalls erfolglos.)

Bei Deinem Arbeitsstil des planlosen Herumratens wundert mich die Erfolglosigkeit nicht wirklich.

--

MudGuard
O-o-ostern

#263180

Mike_R

Rosenheim,
10.03.2011, 20:11:57

@ MudGuard

Bildgröße per javascript ändern

antworten

Erst mal wieder herzlichen Dank für die weitere Hilfestellung.
Hab schon vor ein paar Stunden mit dieser Antwort angefangen, aber dann ist mir zwischendrin immer wieder etwas eingefallen, was mich ein Stückchen weiter brachte - und womit ich dann Dich nicht mehr belästigen muss.

> Dann ist das Element vermutlich nicht positioniert.
Nachdem in der CSS-Datei \'position: relative;\' steht, hab ich das in javascript nicht reingeschrieben, aber nun folgende Zeile ergänzt:
document.getElementById(ident).style.position = \'relative\';

> Wie ich schon schrieb: wildes Rumraten bringt\'s nicht.
Da hast Du ja völlig recht. Aber wenn ich mit dem \'Nachschlagen\' bzw. \'Ergoogeln\' nicht weiterkomme, bleibt mir immer nichts anderes übrig, als sog. Varianten auszuprobieren, die durchaus ab und zu auch neue Erkenntnisse vermitteln.
Dass dabei- mangels exakten Wissens - auch oft Unsinniges probiert wird, ist mir schon klar.

> alert(document.getElementById(ident).style.left);
> zeigen lasse, erscheint die \'-41\'.
> Wirklich? Da sollte aber \'-41px\' rauskommen.

Ja, da erscheint \'-41px\' (sorry, dass ich die px weggelassen hab.)

> Angaben zu left werden nur für positionierte Elemente
> berücksichtigt.

Versteh ich jetzt nicht! Heisst das, dass img-Elemente dann nicht berücksichtigt werden?

> Bei Deinem Arbeitsstil des planlosen Herumratens wundert mich die
> Erfolglosigkeit nicht wirklich.

Siehe Antwort oben!

Ein Problem - für mich - bei der ganzen Sache ist, CSS-Code und javacript-Code unter einen Hut zu bringen. Bin jetzt immerhin so weit, dass es \'nur\' noch an einer Sache hakt.
Es gibt in der html-Datei ein
<div class = \"menu\">
<a id = \"menuAktivLink\" href=\"index.html\">
<img id=\"b1\" src=\".....
In der CSS-Datei soll nun mit

position: relative;
left:-41px; top:0px;

das entspr. Bild nach links gerückt werden. Wie muss die \'Kopfzeile\' aussehen, damit er darauf reagiert? (.menu ? #menuAktivLink ? .menu #menuAktivLink ? .menu a #menuAktivLink ...) (ich weiß, das schaut schon wieder nach Probieren aus, aber - siehe oben!)

Mike_R

#263128

MudGuard

München,
10.03.2011, 08:55:40

@ Mike_R

Bildgröße per javascript ändern

antworten

> > document.getElementById(ident).style.width = \'150\';
> > document.getElementById(ident).style.width = 150;

PS: wildes rumphantasieren wird Dich nicht weiterbringen.

Was ergibt
alert(ident);
alert(document.getElementById(ident));
an der Stelle?

--

MudGuard
O-o-ostern

#263113

d-fens

Bonn,
09.03.2011, 23:36:48

@ Mike_R

Bildgröße per javascript ändern

antworten

> document.getElementById(ident).width = \'150\';
> document.getElementById(ident).width = \'150px\';
> document.getElementById(ident).width:150;

document.getElementById(ident).width = 150;

hast du nicht probiert? Ansonsten wie MudGuard schreibt. Über style.width kannst du es aber nur verändern, wenn das im Stylesheet überhaupt definiert ist.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#263125

MudGuard

München,
10.03.2011, 08:51:01

@ d-fens

Bildgröße per javascript ändern

antworten

> Über style.width kannst
> du es aber nur verändern, wenn das im Stylesheet überhaupt definiert ist.

Falsch. Den Wert zu setzen geht immer.
Aber auslesen kann man über element.style nur die Sachen, die entweder per style-Attribut oder per Javascript gesetzt wurden.

--

MudGuard
O-o-ostern

#263129

d-fens

Bonn,
10.03.2011, 09:05:32

@ MudGuard

Bildgröße per javascript ändern

antworten

> > Über style.width kannst
> > du es aber nur verändern, wenn das im Stylesheet überhaupt definiert
> ist.
>
> Falsch. Den Wert zu setzen geht immer.

Ich habe in einem Projekt leider das Gegenteil erlebt. Ich musste eine initiale Größe erst im CSS setzen, um nachher im Script diesen Wert verändern zu können. Da ging es aber um die horizontale Positionsangabe left.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#263130

MudGuard

München,
10.03.2011, 09:39:16

@ d-fens

Bildgröße per javascript ändern

antworten

> Ich habe in einem Projekt leider das Gegenteil erlebt. Ich musste eine
> initiale Größe erst im CSS setzen, um nachher im Script diesen Wert
> verändern zu können. Da ging es aber um die horizontale Positionsangabe
> left.

Da vermute ich, daß ein anderer Fehler vorlag.
Kann es sein, daß Du left zu setzen versucht hattest, ohne daß position (auf einen anderen Wert als static) gesetzt war?

--

MudGuard
O-o-ostern

#263148

d-fens

Bonn,
10.03.2011, 13:58:59

@ MudGuard

Bildgröße per javascript ändern

antworten

> > Ich habe in einem Projekt leider das Gegenteil erlebt. Ich musste eine
> > initiale Größe erst im CSS setzen, um nachher im Script diesen Wert
> > verändern zu können. Da ging es aber um die horizontale Positionsangabe
> > left.
>
> Da vermute ich, daß ein anderer Fehler vorlag.
> Kann es sein, daß Du left zu setzen versucht hattest, ohne daß position
> (auf einen anderen Wert als static) gesetzt war?

Hmmm, wäre möglich, dass ich im CSS zeitgleich position auf absolute gesetzt habe, als ich left definierte. Das weiß ich aber jetzt nicht mehr.

--
„Tu es oder tu es nicht! Es gibt kein Versuchen.“
(Jedi-Meister Yoda)

#263114 Johann [Gast] 09.03.2011, 23:41:49 @ Mike_R	Bildgröße per javascript ändern antworten
	> document.getElementById(ident).width ist keine Eigenschaft. document.getElementById(ident).style.width allerdings schon.

#263126

MudGuard

München,
10.03.2011, 08:51:38

@ Johann

Bildgröße per javascript ändern

antworten

> > document.getElementById(ident).width
>
> ist keine Eigenschaft.

Doch, da das Element, um das es geht, ein img ist - und das hat ein width-Attribut.

--

MudGuard
O-o-ostern