Bildvorschau

teltim01

Hi Leute, ist denn wirklich keiner hier der mir weiter helfen kann?

GreenRover

erläuter nochmal kurtzt worum es geht.

teltim01

in der Datei bv.rar (oben) sind zwei Bilder als kleine Vorschau. Wenn man eins anklickt, soll es sich vergrößert öffnen. Das funktioniert aber nur mit einem Bild.

GreenRover

soll ich dir jetzt dieses script umschreiben, oder wolltest ud das ganza als popup haben???

teltim01

das Bild von dem Mann, sollte sich genau so öffnen lassen wie das Bild von der Frau. Wenn man auf die Frau klickt, öffnet sich auch das Bild von der Frau (vergrößert). Wenn man auf den Mann klickt öffnet sich aber auch das Bild von der Frau, und das sollte nicht so sein. Das Bild das man anklickt, sollte sich öffnen...

GreenRover

lies nächstes mal richtig!!!!!

die frage war, ob es mit JS bleiben soll oder als popup!!!!

Ist jetzt aber auch egal, da das jetzt hier die JS lösung ist!!

HTML

<html>
<head>
<meta name="Author" content="M.Carvalho">


<script type="text/javascript" language="JavaScript">
<!--
var obj_array=new Array(2);
obj_array['tat'] =new Array('Tat mit Brille', 'tat.jpg');
obj_array['card']=new Array('Das ist Crad!!', 'card.jpg');




function show_hide_obj ( vi )
{
 var obj=document.getElementById('bild');
 obj.style.visibility=vi;
}


function open_obj( obj_id, obj_array )
{
 show_hide_obj('visible');
 document.getElementById('img_bild').src=obj_array[obj_id][1];
 document.getElementById('text_bild').value=obj_array[obj_id][0];
}


-->
</script>
</head>
<body>
<table border=0 align=center>
 <tr>
  <td CLASS="pmargin">
   [img]tat_k.jpg[/img]<br \>
   [img]icon_lupe.gif[/img]
  </td>
  <td CLASS="pmargin">
   [img]card_k.jpg[/img]<br \>
   [img]icon_lupe.gif[/img]
  </td>
 </tr>
</table>


<div ID="bild" CLASS="divpopupbild" STYLE="top: 150px; visibility: hidden;">
    <table border=0 width="300" height="320" cellspacing=0 cellpadding=0 bgcolor="#000000">
    <tr>
     <td width=280 CLASS="pophead_foto">
	    <textarea id="text_bild" disabled style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; border-width:0px; background-color:#000000;"></textarea>
	 </td>
     <td align=center width=20 CLASS="pophead_foto">
       [img]icon_x.gif[/img]
	 </td>
    </tr>
    <tr>
     <td colspan=2>
      [img][/img]
	 </td>
    </tr>
    <tr>
        <td colspan=2 CLASS="popfoot">
            <a style="cursor: pointer; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF;" onclick="show_hide_obj('hidden')" class="poplink">
           Fenster schliessen<a>
        </td>
    </tr>
    </table>
</div>




</p>
</body>
</html>

Alles anzeigen

teltim01

Vielen Dank für deibe Hilfe. Bei mir erscheinen jetzt zwei Pfeile über dem Bild. Kannst du mir sagen wie ich sie weg bekomme?

GreenRover

da sind keien 2 Pfeile, aber hier nochmal eien etwas verbesserte Version.

HTML

<html>
<head>
<meta name="Author" content="M.Carvalho">
<style type="text/css">
<!--
.schrift_div {
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	font-size:12px; 
	color:#FFFFFF;
}
-->
</style>


<script type="text/javascript" language="JavaScript">
<!--
var obj_array=new Array(2);
obj_array['tat'] =new Array('<a class="schrift_div">Tat
 mit Brille</a>', 'tat.jpg');
obj_array['card']=new Array('<a class="schrift_div">Das ist Crad!!</a>', 'card.jpg');


<!-- gueltig fuer Netscape ab Version 6, Mozilla, Internet Explorer ab Version 4
var dragobjekt = null;
var dragx = 0;
var dragy = 0;
var posx = 0;
var posy = 0;


function show_hide_obj ( vi )
{
 var obj=document.getElementById('bild');
 obj.style.visibility=vi;
}


function open_obj( obj_id, obj_array )
{
 show_hide_obj('visible');
 document.getElementById('img_bild').src=obj_array[obj_id][1];
 document.getElementById('text_bild').innerHTML=obj_array[obj_id][0];
}


function draginit() 
{
 // Initialisierung der Überwachung der Events
 document.onmousemove = drag;
 document.onmouseup = dragstop;
}


function dragstart(element) 
{
 //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
 //Parameter element: Das zu bewegende Objekt.
 dragobjekt = element;
 dragx = posx - dragobjekt.offsetLeft;
 dragy = posy - dragobjekt.offsetTop;
}
function dragstop() 
{
 //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
 dragobjekt=null;
}
function drag(ereignis) 
{
 //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
 posx = document.all ? window.event.clientX : ereignis.pageX;
 posy = document.all ? window.event.clientY : ereignis.pageY;
 if(dragobjekt != null) 
 {
  dragobjekt.style.left = (posx - dragx) + "px";
  dragobjekt.style.top = (posy - dragy) + "px";
 }
}


-->
</script>
</head>
<body onload="draginit()">
<table border=0 align=center>
 <tr>
  <td CLASS="pmargin">
   [img]tat_k.jpg[/img]<br \>
   [img]icon_lupe.gif[/img]
  </td>
  <td CLASS="pmargin">
   [img]card_k.jpg[/img]<br \>
   [img]icon_lupe.gif[/img]
  </td>
 </tr>
</table>


<div ID="bild" CLASS="divpopupbild" STYLE="position:absolute; top:200px; left:200px; height:300px; width:300px;  visibility:hidden;" onmousedown="dragstart(this)">
    <table border=0 width="100%" height="100%" cellspacing=0 cellpadding=0 bgcolor="#000000">
    <tr>
	 <td width="10">

	 </td>
     <td width="270" valign="bottom">
	  <div id="text_bild"></div>
	 </td>
     <td align=center width=20>
       [img]icon_x.gif[/img]
	 </td>
    </tr>
    <tr>
     <td colspan=3>
      [img][/img]
	 </td>
    </tr>
    <tr>
        <td colspan=3 valign="top">
            <a style="cursor:pointer;" class="schrift_div" onclick="show_hide_obj('hidden')" class="poplink">
           Fenster schliessen<a>
        </td>
    </tr>
    </table>
</div>


</body>
</html>

Alles anzeigen

cookie

boah hast du das alles extra für den geschrieben ?? hammer

GreenRover

das sit doch bloß ein kleiner Text und dazu fande ich die idee nicht schlecht und damit habe ich gleich ncoh ein script mehr in meiem archiv.

cookie

so kann man es auch sehen

teltim01

1000 mal Danke an GreenRover

Referend

Hallo bin zufälling hier gelandet und hab mich in das Problem auch nicht richtig reingearbeitet, deshalb fällt die Erklarung jetzt auch was oberflächlicher aus!

Ich würds so machen:

funktion vergrösserung(bild){
verrössern bla blavon bild
}

aufruf durch
<..... onClick="vergössern('foto.jpg"').....>

Das ist jetzt nur eine idee müsset aber funzen!

GreenRover

vielen dank, aber nächstes mal bitte richtig lesen und konkret antworten, den die antwort kann z.B. nicht ein stück deuten (-; Da sie ganz und garnichts mit der Frage zu tuhen hat.

Tags