backgroundposition ändern, geht das?

[Fe.m@c]

Hallo zusammen,

tja .. da komme ich mit meinem DreamweaverScript (CS3) leider nicht weiter
Ich habe eine 3D Navigation und nun aber das Problem, dass jeder Navigationspunkt
das gesamte Bild im Hintergrund ändert, durch den schönen Schattenwurf, dadurch
verändert sich das gesamte Bild.

Gedanke ist ein HG Bild im Navigationskasten zu verschieben. Das "Eigenschaften ändern"
Script von Dreamweaver sieht z.B. so aus:

Javascript:
<script type="text/javascript">
<!--
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
//-->
</script>

Die wichtigen Styles so:
#navi {
position:absolute;
left:0px;
top:0px;
z-index:3;
height: 100px;
width: 500px;
display: block;
background-image: url("navi.gif");
background-repeat:no-repeat;
background-position: 0px -200px;
}

Mein HTML Gerüst schaut so aus:
<div id="navi">
<ul>
<li><a href="#" onmouseover="MM_changeProp('navi','','background-position','0px -300px','DIV')">Punkt 1</a></li>
<li><a href="#" onmouseover="MM_changeProp('navi','','background-position','0px -400px','DIV')">Punkt 2</a></li>
</ul>
</div>


funktioniert aber nicht Der HTML/CSS Aufbau müsste gehen, denn wenn ich z.B. die Eigenschaft
"top" mit Wert "50" ändere, versetzt er mir den Kasten bei Mouseover um 50 von oben.

Vielleicht denke ich auch viel zu kompliziert ... aber das geht doch bestimmt, oder?
Wäre dankbar für Ideen!

Grüssla Fe

[threadi]

obj.style.backgroundPosition = "0 -300px";

oder

obj.setAttribute("background-position", "0 -300px");

Siehe: http://de.selfhtml.org/javascript/ob...#set_attribute

[Fe.m@c]

Hallo threadi,

danke für Deine Antwort! Aehm ... aber wo schreibe ich das rein?
Kann ich das irgendwo in das vorhandene Script mit reinschreiben oder
muss das mit in den link <a href="javascriptbj.style.backgroundPosition = "0 -300px"> (funzt nicht )

Sorry für blöde Nachfrage, aber genau das ist mein Problem bei JS
ich verstehe es nämlich auch bei selfhtml nicht.

Brauche ich eine neue Funktion? *bibber*
Wohin mit den vielen Zeichen ..
Ich muss dann auch jedem li-Punkt eine eigenen Wert zum background verschieben geben
können btw. also von daher wäre eine Funktion nicht verkehrt

Also wenn Du Dir nochmal die Mühe machst es mir zu erklären
wäre ich sehr sehr happy!

schönen Abend - Fe

[threadi]

Die Style-Eigenschaft kann so wie in meinem Beispiel geschrieben von einem Objekt geändert werden. Das was in meinem Beispiel als "obj" steht, müsstest Du durch einen Verweis auf das von dir zu verändernde Objekt ersetzen. Wenn Du z.B. den Hintergrund eines <div> beim Überfahren eines Links <a> verändern willst, müsstest Du das so definieren:

<div id="navi">...bla..blubb.. <a href="#" onmouseover="document.getElementById('navi').style.backgroundPosition = '0 -300px;">Linkbeschriftung</a></div>

Sowas in deinen Code einzubauen halte ich für überflüssig. Den kann man einfacher schreiben.

Schau dir den oben stehenden Link auch mal an, dort ist ein konkretes Beispiel hinterlegt.

[Fe.m@c]

WOW!!!!! Dankeschön ))))))
Das klappt! *schwer.begeistert*

Am Ende im Code fehlt ein Apostroph - falls es jemand auch ausprobieren will. (das hab ich noch kapiert, hihi)
Also:
<div id="navi">...bla..blubb.. <a href="#" onmouseover="document.getElementById('navi').style.backgroundPosition = '0 -300px';">Linkbeschriftung</a></div>


Vielen herzlichen Dank! Wie schön so ein paar einfache Zeilen Code sein können
Und Du hast vollkommen Recht, das kann man pro Zeile mit rein schreiben - wusste ja nicht,
dass das geht, haha. Perfekt!

Die besten Wünsche durch die Nacht sendet Dir
Fe