Hyperlink: target= als div-Container?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
adresse
beispiel
bild
container
dank
datei
direx
fenster
fram
funktion
kombination
mach
opus
overflow
page
problemchen
quelltext
stehen
tutorial
vielen dank
-
Ich habe mit meiner HP ein kleiner Problem. Ich habe auf meiner HP eine kleine Bildergalerie. Da habe ich oben die Links stehen (1, 2, 3, usw.) und unten wird dann das Bild dazu angezeigt und darunter noch ein kleiner Kommentar. Momentan habe ich dieses Problem sehr unelegant geloesst, ich habe naemlich fuer jedes Bild eine html-Datei. Da ich aber immer mehr Bilder hinzufuegen will, ist dann irgendwann mal der Aufwand zu gross, jede einzelne html-Datei upzudaten.
Ich habe zwar schon an Frames gedacht (waere wahrscheinlich am Einfachsten), aber ich wollte keine Frames mehr benuztzen.
Gibt es dafuer eine CSS-Loesung. Ich habe meine PAge sowieso mit CSS gemacht und dachte mir, dass man vielleicht fuer das Bild einen div-Container als target angibt. Geht das, oder wie loese ich dieses Problem am Besten? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Also ich w?rde dir vorschlagen dabei JavaScript in Kombination mit reinem HTML einzusetzen:
<a href="bild.jpg" target=_blank onclick="document.images[0].src = 'bild.jpg';return false;">Bild 1</a>
Sollte JavaScript aktiviert sein wird das Bild ge?ndert, am Besten liest du dazu mal das hier:
http://de.selfhtml.org/javascript/objekte/images.htm#src
Sollte JavaScript nicht aktiviert sein, wird das Bild in einem neuen Fenster ge?ffnet.
H2O -
Ich benutze f?r meine Fotos folgendes Script:
<p align="center"><img name="myPicture" src="img1.gif" width="100" height="57">
<script language="JavaScript">
<!--
//Slide Show script (this notice must stay intact)
//For this and more scripts
//visit java-scripts.net or http://wsabstract.com
var myPix = new Array("img1.gif","img2.gif","img3.gif")
var thisPic = 0
function doPrevious() {
if (document.images && thisPic > 0) {
thisPic--
document.myPicture.src=myPix[thisPic]
}
}
function doNext() {
if (document.images && thisPic < 2) {
thisPic++
document.myPicture.src=myPix[thisPic]
}
}
// -->
</script>
<br><small><font face="Verdana"><a href="javascript:doPrevious()">Previous</a><font color="#FFFFFF">-</font> <a href="javascript:doNext()">Next</a></font></small> -
Also ich w?rde dir vorschlagen dabei JavaScript in Kombination mit reinem HTML einzusetzen:
<a href="bild.jpg" target=_blank onclick="document.images[0].src = 'bild.jpg';return false;">Bild 1</a>
Sollte JavaScript aktiviert sein wird das Bild ge?ndert, am Besten liest du dazu mal das hier:
http://de.selfhtml.org/javascript/objekte/images.htm#src
Sollte JavaScript nicht aktiviert sein, wird das Bild in einem neuen Fenster ge?ffnet.
H2O
Viene Dank schonmal dafuer, das sieht vielversprechend aus. Kann ich das mit dem Kommenar irgendwie realisieren? Ich wollte eigentlich unter jedem Bild einen kleinen Kommentar haben. Ihr koennt ja mal in die Bildersection meiner HP schauen, die ist z.Zt. aber total beschissen und da wollte ich halt mal was machen! -
Ja, das ist auch m?glich.
Am Besten machst du dir dann so eine Funktion:
function bild(bildname,comment) {
document.images[0].src = bildname;
document.formular_name.feld_name.value = comment;
}
<a href="bild.jpg" target=_blank onclick="bild('bild1.jpg','Hier sehen Sie das Bild 1';return false;">Bild 1</a>
So w?rde die Funktion und der Link aussehen.
Und das bei SelfHTML:
http://de.selfhtml.org/javascript/objekte/elements.htm#value
H2O -
Ich w?rde mein oben genanntes script einfach um ein weiteres array erweitern, in dem dann zu den Bildern mit demselben index die kommentare stehen.
-
Ich w?rde mein oben genanntes script einfach um ein weiteres array erweitern, in dem dann zu den Bildern mit demselben index die kommentare stehen.
Also das Script ist aber ziemlich kompliziert...
Und vor allem musst du dann wohl f?r jedes neue Bild einen Array-Inhalt einf?gen.
Bei meiner Funktion musst du dagegen einfach nur den Link setzen und fertig.
H2O -
function bild(bildname,comment) {
document.images[0].src = bildname;
document.formular_name.feld_name.value = comment;
}
<a href="bild.jpg" target=_blank onclick="bild('bild1.jpg','Hier sehen Sie das Bild 1';return false;">Bild 1</a>
Und wie muss ich die dann in meine Page einbinden? -
Vielen dank schon ma;l fuer deine Bemuehungen, h20, ich habe hier mal den Quelltext:
http://direx.pyrokar.lima-city.de/bildertest/
Aber irgendwie funzt das noch nicht richtig! Woran kann das liegen? Das Bild wird naemlich nicht in dem div-Container angezeigt, in dem ich es haben will. -
Denk mal dr?ber nach, welches image-Tag hier ver?ndert werden soll.
document.images[0].src = bildname; -
Geben oben in dem Script mal das hier an:
document.images[6].src = bildname;
Mit der 6 sagst du, dass das 7. (JS f?ngt bei 0 an zu z?hlen) Bild ver?ndert werden soll.
Mit 0 ver?ndert er das erste.
H2O -
Geben oben in dem Script mal das hier an:
document.images[6].src = bildname;
Mit der 6 sagst du, dass das 7. (JS f?ngt bei 0 an zu z?hlen) Bild ver?ndert werden soll.
Mit 0 ver?ndert er das erste.
H2O
Ist ja cool, danke dafuer!
Noch eine Frage: kann ich den Kommentar auch als Text (formatiert mit CSS) darstellen und nicht mit einem "Formular"? Das saehe dann toller aus! -
Das ist per Javascript m?glich, funktioniert aber nicht unbedingt ?berall bzw. wie gew?nscht.
Die Analyse von
http://de.selfhtml.org/dhtml/beispiele/datumuhr.htm
hilft dir beim Weiterlernen
-
Aber wie binde ich das jetzt in meine HP ein?
-
Ich schrieb nich grundlos *Weiterlernen*
Welches Problem beim Einbinden hast du genau, was hast du nicht verstanden? -
Also man kann das Textfeld auch mit CSS so um?ndern, dass es so aussieht, wie normaler Text:
<input ... style="font-size:12px; font-family:'Times New Roman'; border:none; background-color:red;">
H2O -
Machs lieber mit PHP. Dann k?nnen User, die kein Javascript angeschaltet haben, deine Bilder auch sehen.
-
Ich bin nun fast fertig! Ich habe das Input-Feld in ein Textare geaendert, weil sonst einige Kommentare zu lang waeren. Ich habe nun mit diesem Textarea nur noch ein Problemchen. Der IE zeigt am Rand IMMER diese haesslichen SCrollbalken an. Kann ich da was dagegen tun?
So sieht mein Form z.Zt. aus:
<form>
<img src="Bilder/bild.jog"><br>
<textarea name="Text" readonly cols="70" rows="5" style="font-size:12pt; font-family:'Verdana','Arial',sans-serif; border:none; background-color:#0066FF;">Bild 1</textarea>
</form>
@h2o: schon mal ganz lieben Dank, dass du mich schon so weit gebracht hast! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage