Zum Inhalt springen

Bildlink mit JavaScript manipulieren


Ganymed

Empfohlene Beiträge

Hallo zusammen,

ich hab mal ne genaz blöde Frage.

Es ist Ewigkeiten her, dass ich was mit JS gemacht habe und meine alten Schulungsunterlagen hier helfen mir auch grad nicht weiter.

(Ich muss das was ich vorhabe mit JS machen, andere Boardmittel hab ich hier leider nicht / darf ich nicht benutzen)

Und zwar folgendes:

Ich habe mehere Bilder. Diese möchte ich als Thumbnail auf einer kleinen HTML Seite anzeigen lassen, und der Benutzer kann mit der open() Methode ein Neues Fenster öffnen, um sich das Bild genauer zu betrachten.

Nur irgendwie find ich nirgends ein Beispiel, wo ich bei einem Bildlink dieses PopUp aufmachen kann...

Hier in der Schulungsunterlage steht nur sowas billiges wie "Öffne beim Öffnen der Seite einfach ein Popup"...

Eine Link-Lösung (oder gar eine Bildlink-Lösung) find ich nirgends...

Kann mir da jemand weiterhelfen? Ich weiß auch nicht, wie man das genau nennt, um zu googlen...

LG,

Ganymed

Edit:

Ich habs gerade irgendwie so versucht....


           <script langauage="JavaScript">

             <!--

              <a href="javascript:open("img src="bulk.jpeg" width="70" height="98" border="0" alt="">", "test", "height=200, width=300")><img src="bulk.jpeg" width="70" height="98" border="0" alt=""></a>



             //-->


            </script>

Passiert

1) gar nichts (:D)

2) möchte ich keine Größenangabe mitgeben. Das Bild soll unskaliert in dem Pop-Up drinne sein...

Link zu diesem Kommentar
Auf anderen Seiten teilen

Also ich hab sowas mal so gemacht:

Die Javascript-Datei sieht so aus:


function resizeWin()

{

window.resizeTo(self.document.images[0].width+50,

 self.document.images[0].height+100);


document.title = unescape(self.location.search.substr(1));

window.focus();

}




function showImg(aName) { imgName = aName+".jpg"; 

windowHandle = window.open("show.html?"+imgName, 

"showimage", "resizable=yes, scrollbars=yes, 

dependent=no, location=no, menubar=no,

 status=no, toolbar=no, top=5") }

Die wird auf der Thumbnail und der Bildseite eingebunden. Die Thumbnails sehen dann so aus:

<img src="thumbs/bild.jpg" width="150" height="300" 

alt="Text zu Bild" name="bild" 

onclick="showImg(this.name)" />

und die Datei show.html (zum Anzeigen des Bildes im Popup):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; 

charset=ISO-8859-1">

<title>

Image

</title>

<link rel="stylesheet" type="text/css" href="CSS/styles.css">

<script type="text/javascript" src="Images.js">

</script>

</head>

<body class="bdImg" onload="resizeWin()">


<div style="text-align: center">

<span class="link" onclick="self.window.close()">

close</span><br />


<script type="text/javascript">

<!--

document.write('<img src="./Bilder/' + 

self.location.search.substr(1) + '" 

class ="link" onclick="self.window.close()" >');

//-->


</script>

</div>




</body>

</html>

Tut eigentlich das, was du willst.

EDIT:

Das Problem ist halt, ohne Javascript sieht man gar nichts... aber das is auch schon was her, seit ich das gemacht hab ;)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ja, ich weiß, dass man das JS nicht sieht, wenns nicht aktiviert ist.

Soll halt nur zu einer Doku von mir und als Übersicht für die Kollegen dienen.

Ich spreche also keinen großen Nutzerkreis an :)

Aber das mit der externen Funktion hat mich schon mal weitergebracht und fuktioniert! Danke schön! :)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ja, ich weiß, dass man das JS nicht sieht, wenns nicht aktiviert ist.

Ja, ich meinte ja nur... ich wüsste keinen anderen Weg und ohne Javascript sieht man eben nur die Thumbnails.

Hab mich damit auch nicht weiter beschäftigt, aber bis auf ein window.open('./bild.jpg'...) kann ich mir da auch nichts vorstellen.

EDIT:

Ne, nichtmal das ginge ja :D

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...