Image erstellen und ein-/ausblenden
andynail
- javascript
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
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