✔ Problem bei CSS Steuerung

[soa]

Hallo ,

ich habe eine Funktion geschrieben, die ein CSS Element beeinflusst und ein Bild als
backgroungImage darstellt.

Das funktioniert auch soweit. Leider muss man trotz eines onclick-Events einen Doppelklick machen, damit das Span-Element in der Größe des Bildes erscheint.

Bei einem einfachen Klick hat das Element nur eine Größe von ca 20 px .
Ich verstehe nicht, warum die Größe erst beim 2. Klick angepaßt wird.

function showElement( link )
{

   var element = document.getElementById("bildelement");
   var newImage = new Image();
   newImage.src = link;
   var breite = newImage.width;
   var hoehe  = newImage.height;

		element.style.width  = breite+"px";
		element.style.height = hoehe+"px";
		element.style.backgroundImage = "url(" + newImage.src + ")";
    element.style.visibility = 'visible';
 
}//end of function





function hideElement()
{ 
   document.getElementById("bildelement").style.visibility = 'hidden';
}

CSS:

#bildelement
{
position: absolute; 
width: 100px;
height: 100px;
background-color: #bbb; 
background-repeat: no-repeat; 
background-position: center; 
border: dotted 1px #900 ;
padding:10px;
visibility: hidden;
left: 200px;
top:  150px; 
}

Link:
<a href="#" onclick="showElement('images/rooter1.jpg')">POP mich an!</a>

Vielleicht kann mir jemand sagen, wo mein Fehler liegt. Das Phänomen besteht in allen Browsern !!


Grüße
Soa

 

[OnlyFoo]

Beim ersten Klick ist das Bild noch nicht geladen.
Probiers mal so:

function showElement( link )
{

   var newImage = new Image();
   newImage.onload = function() {
        var breite = newImage.width;
        var hoehe  = newImage.height;  

        var element = document.getElementById("bildelement");
        element.style.width  = breite+"px";
        element.style.height = hoehe+"px";
        element.style.backgroundImage = "url(" + newImage.src + ")";
        element.style.visibility = 'visible';
   };
   newImage.src = link;   
}//end of function

 

[SGSSGene]

Könnte man nicht die Höhe und Breit auf 100% stellen?
das bezieht sich doch, dann auf die Bildgröße.(oder täusche ich mich da?)

 

[OnlyFoo]

du täsuchst dich. der typ setzt ja den hintergrund, der ist unabhängig von der größe des divs...
meine möglichkeit oben müsste eigentlich funktionieren.
warten bis das bidl geladen ist und erst dann die eigenschaften setzten

 

[SGSSGene]

Stimmt, meine Fehler, hab nicht gesehen er das Bild als Hintegrund setzte.
Ich bin ein wenig skeptisch was die onload funktion angeht.
Du benutzt dort das Objekt newImage, aber das ist Javascript in derFunktion doch garnicht bekannt?!

 

[soa]

@OnlyFoo : Hervorragend.... das funktioniert viel besser