andynail: Image erstellen und ein-/ausblenden

Hallo zusammen,

auf meiner Seite, einer Linksammlung, sollen Vorschaugrafiken der mit der Maus überfahrenen Links angezeigt werden. Diese sollen aus der Linkliste falls vorhanden angezeigt werden. Hierzu sollen die Grafiken beim Aufruf der Seiten erstellt werden:

function PicturesErstellen(Bereich)
{
PictureCount = 0
for (var i = 0; i < Link.length; i++)
{
if (Link[i].onmouseover != undefined)
{
e = parent.document.createElement("div")
e.setAttribute("id", "SitePictures")
e.style.position = "absolute"
e.style.zIndex = "3"
e.setAttribute("top", "100px")
e.setAttribute("left", "4px")
e.setAttribute("margin-left", "4%")
e.setAttribute("width", "150px")
e.setAttribute("height", "110px")
Pic = parent.document.createElement("image")
Pic.setAttribute('xlink:href', "Pictures/" + Bereich + "/" + Link[i].innerText + ".jpg");
e.appendChild(Pic)
PictureCount = PictureCount + 1
}
}
}Wenn ich jetzt jedoch in der Funktion onmouseover die Anzahl der Elemente SitePictures zurückgeben lassen will wird die Fehlermeldung "Objekt erforderlich" angezeigt. Als würden die Objekte nicht erstellt worden sein. Die Schleife läuft jedenfalls im IE. SitePictures sollen die Objekte heisen um sie ein-/auszublenden. Die ID wird ja vergeben.

Danke Gruß Andreas

  1. Hallo andynail,

    so ganz verstehe ich nicht, was du da machst, daher nur ein paar Anmerkungen:

    function PicturesErstellen(Bereich)
    {
    PictureCount = 0
    for (var i = 0; i < Link.length; i++)
    {
    if (Link[i].onmouseover != undefined)
    {
    e = parent.document.createElement("div")
    e.setAttribute("id", "SitePictures")

    IDs müssen eindeutig sein, z.B. "id"+i

    e.style.position = "absolute"
    e.style.zIndex = "3"
    e.setAttribute("top", "100px")

    ich würde statt setAttribut lieber
        e.top="100px";
    verwenden. Kann es sein dass hier und im Folgenden style fehlt? Also
        e.style.top="100px";

    e.setAttribute("left", "4px")
    e.setAttribute("margin-left", "4%")
    e.setAttribute("width", "150px")
    e.setAttribute("height", "110px")
    Pic = parent.document.createElement("image")

    parent hat hier nichts zu suchen.

    Pic.setAttribute('xlink:href', "Pictures/" + Bereich + "/" + Link[i].innerText + ".jpg");

    was soll xlink:href sein?

    e.appendChild(Pic)

    was hast du mit dem Div e eigentlich vor? Erst anlegen und dann vergessen?

    PictureCount = PictureCount + 1
    }
    }

    Gruß, Jürgen

    1. Hallo

      xlink:href habe ich aus dem Netz um einen Link zur Grafikdatei zu erstellen. Die Grafikdatei soll genauso heisen wie der Text des Links.

      e = parent.document.createElement("div")
      e.appendChild(Pic)

      Wieso vergesse ich e? Ich habe es doch erstellt und dann ein Bild hinzugefügt?

      Danke gruß Andreas

      1. Hallo andynail,

        xlink:href habe ich aus dem Netz um einen Link zur Grafikdatei zu erstellen. Die Grafikdatei soll genauso heisen wie der Text des Links.

        von einem Attribut "xlink:href" habe ich noch nie gehört. Ich habe vor Norwegen zwar einige dicke Fische aus dem Wasser gezogen, aber ein "xlink:href" war nicht dabei. :-)

        Wenn du einen Link benötigst, erstelle ein a-Element und setze sein href.

        e = parent.document.createElement("div")
        e.appendChild(Pic)

        Wieso vergesse ich e? Ich habe es doch erstellt und dann ein Bild hinzugefügt?

        Weil du mit dem e nichts machst. Erzeugen reicht nicht, du musst das DIV schon irgendwo einbauen.

        Gruß, Jürgen

        1. Hallo andynail,

          xlink:href habe ich aus dem Netz um einen Link zur Grafikdatei zu erstellen. Die Grafikdatei soll genauso heisen wie der Text des Links.

          von einem Attribut "xlink:href" habe ich noch nie gehört. Ich habe vor Norwegen zwar einige dicke Fische aus dem Wasser gezogen, aber ein "xlink:href" war nicht dabei. :-)

          aus dem Netz habe ich alles.

          Wenn du einen Link benötigst, erstelle ein a-Element und setze sein href.

          mit Link meine ich einen Verweis auf die Grafikdatei.

          Weil du mit dem e nichts machst. Erzeugen reicht nicht, du musst das DIV schon irgendwo einbauen.

          schön das jetzt zu wissen. Aber wie soll ich denn bitte das Objekt5 e einbinden?

          Aber nur Programmzeilen helfen mir weiter und ich würde mich freuen davon etwas lesen zu können.

          Danke Gruß Andreas

          1. Hallo andynail,

            aus dem Netz habe ich alles.

            vielleicht solltest du dann mal nach den Basics suchen, und nicht nach Codeschnippseln, die du nicht verstehst.

            Aber nur Programmzeilen helfen mir weiter und ich würde mich freuen davon etwas lesen zu können.

            du kannst eine div-Element erstellen,
            du kannst ein img-Element erstellen,
            du kannst ein img in ein div einhängen.

            Und jetzt erwartest du, dass dir jemand zeigt, wie man das div in irgendein anderes Element einhängt?

            Du solltest dir wirklich mal die Grundlagen aneignen.

            Gruß, Jürgen

            1. Was soll das denn schon wieder? Ich erstelle ein div, integriere hier ein Bild und bekomme die Antwort mit dem div etwas zu machen, was ich als Antwort bekommen hatte. Schreib ich irgendwo das ich das div wieder irgendwo integrieren will? Mit diesen Antworten fängt man nichts an und schön auf diesem weg immer erfahren zu dürfen das ein Projekt undmöglich ist, da keine Programmzeilen als Antworten zu schreiben sind. Denn das ist ja meine Frage gewesen was ich denn jetzt noch mit dem erstellten Objekt anfangen soll? Mag ja scein das ich noch eine Chance bekomme mein Vorhaben zu realisieren.

              Danke Gruß Andreas

              1. Denn das ist ja meine Frage gewesen was ich denn jetzt noch mit dem erstellten Objekt anfangen soll? Mag ja scein das ich noch eine Chance bekomme mein Vorhaben zu realisieren.

                Das läßt sich aus deinem Code nicht beantworten. Du willst ein dynamisches Bild einblenden, das ist einfach:

                1. erzeuge ein Bild:
                var img = new Image(); // oder creareElement()

                2. Weise eine Quelle zu:
                img.src = quelle;

                3. Füge es dem Dokument hinzu

                document.body.appendChild(img); // aber Achtung! am besten erst nach dem laden.

                4. Jetzt kannst es ein und ausblenden:

                img.style.display = 'none' || 'inline';

                Die Funktionen 2 und 4 musst du mouseover dann aufrufen.

                Struppi.

                1. Hallo und vielen Dank Struppi,

                  die Zeilen hatte ich gesucht. Die Bilder werden angezeigt.

                  Jedoch hab ich noch immer das problem das mir length noch immer 0 zurückgibt.

                  Die aktuellen Codezeilen lauten:

                  function PicturesErstellen(Bereich)  
                  {  
                  	PictureCount = 0  
                  for (var i = 0; i < document.getElementsByName("Link").length; i++)  
                  {  
                  	if (document.getElementsByName("Link")[i].onmouseover != undefined)  
                  	{  
                  	e = parent.document.createElement("div")  
                  	e.name = "SitePictures"  
                  	e.style.position = "absolute"  
                  	e.style.zIndex = "3"  
                  	e.style.top = "100px"  
                  	e.style.left = "4px"  
                  	e.style.marginLeft = "4%"  
                  	e.style.width = "150px"  
                  	e.style.height = "110px"  
                  	Pic = document.createElement("image")  
                  	Pic.src = "Pictures/" + Bereich + "/" + Link[i].innerText + ".jpg"  
                  	e.appendChild(Pic)  
                  parent.document.body.appendChild(e)  
                    
                  	PictureCount = PictureCount + 1  
                  	}  
                  }  
                  }  
                    
                  function ShowPicture(index)  
                  {  
                  	alert(parent.document.getElementsByName("SitePictures").length)  
                  	parent.document.getElementsByName("SitePictures")[index].visibility = "visible"  
                  }  
                  
                  

                  Würde mich freuen auch dazu Hilfe zu bekommen.

                  Danke Gruß Andreas

                  1. Hi,

                    Jedoch hab ich noch immer das problem das mir length noch immer 0 zurückgibt.

                    e = parent.document.createElement("div")
                    e.name = "SitePictures"

                    alert(parent.document.getElementsByName("SitePictures").length)

                    DIV hat kein Attribut namens name.
                    Du kannst zwar dem Objekt eine derart benannte Eigenschaft als sog. Expando zuweisen - aber das hat keine Auswirkung auf das, was getElementsByName dir liefert - denn das schaut nur nach Elementen, die in HTML ein name-Attribut haben.

                    MfG ChrisB

                    --
                    Light travels faster than sound - that's why most people appear bright until you hear them speak.
                    1. Hallo ChrisB und vielen Dank.

                      Schade nur das es mit dem Attribut name nicht klappt. Jetzt verwende ich für die Schleife e.setAttribute("id", "SitePictures" + i) und es funktioniert einwandfrei!

                      Danke Gruß Andreas

                    2. Hallo zusammen

                      und ich hoffe es hört mich noch jemand.

                      Im IE unktionierts einwandfrei. Doch im Firefox werden die Bilder nicht angezeigt und die Fehlerkonsole zeigt auch keine Fehler. Ich hab die Funktion einfac h mal durch die Zeilen

                        
                      	LinkText = document.getElementsByName('Link')[i].innerHTML  
                      	Start = LinkText.search(/>/)  
                      	if (Start != -1)  
                      	{  
                      	Ende = LinkText.search(/a>/)-2  
                      		if (LinkText.slice(Ende, Ende+1) != "<")  
                      		{  
                      		Ende = Ende -1  
                      		}  
                      	LinkText = LinkText.slice(Start+1, Ende)  
                        
                      Adresse = parent.location.href  
                      Ende = Adresse.lastIndexOf('/');  
                      Adresse = Adresse.slice(0,Ende);  
                        
                      
                      

                      ergänzt doch es läuft nicht.

                      Danke gruß Andreaas

                      1. Hallo andynail,

                        poste mal einen Link auf deine Testseite. Mit den von dir geposteten Codeauszügen kann ich dein Problem nicht nachvollziehen.

                        Gruß, Jürgen

                        1. Hallo JürgenB

                          Die Codezeile

                          Pic.src = Adresse + "/" + "Pictures/" + Bereich + "/"  + LinkText + ".jpg"  
                          
                          

                          ergibt den Link

                          http://127.0.0.1;4001/Startseite/Pictrues/Hobby/winboard.org.jpg

                          und beim IE brächte ich die Adresse garnicht. Sie erscheint schon so. Ich dachte ich ergänze den Link für den Firefox. Und als Server setze ich server2go ein da das Ganze mal auf einen usb-Stick soll und nicht ins Netz.

                          Danke gruß Andreas

              2. Hallo andynail,

                ... und bekomme die Antwort mit dem div etwas zu machen, was ich als Antwort bekommen hatte.

                muss ich das jetzt verstehen?

                Schreib ich irgendwo das ich das div wieder irgendwo integrieren will?

                und warum erzeugst du es dann?

                Mit diesen Antworten fängt man nichts an und schön auf diesem weg immer erfahren zu dürfen das ein Projekt undmöglich ist, da keine Programmzeilen als Antworten zu schreiben sind. Denn das ist ja meine Frage gewesen was ich denn jetzt noch mit dem erstellten Objekt anfangen soll? Mag ja scein das ich noch eine Chance bekomme mein Vorhaben zu realisieren.

                Struppi hat ja inzwischen geraten, was du da vorhast und auch sofort die Lösung geliefert. Trotzdem solltest du dich endlich darum bemühen, zu verstehen, was du da aus den Netz ziehst. Die Realisierung eines Projektes sollte nicht daran scheitern, dass da "keine Programmzeilen als Antworten zu schreiben sind".

                Gruß, Jürgen