Hallo,
ich habe einen Code für eine Bildergalerie welches man mit zwei Pfeilen (recht/links) in die jeweilige Richtung steuern kann. Das klappt auch ganz gut, nur möchte ich beim klick auf das Bild ein neues Popup Fenster öffnen und das Bild anzeigen lassen. Im Code wird ja mit der Funktion "MM_callJS(jsStr)" die "grossansicht ()" aufgerufen, aber wie genau funktioniert das und wo muß ich die grossansicht () definieren ?
Code:
Bitte um Hilfe.....
Danke und Gruß
Nici
ich habe einen Code für eine Bildergalerie welches man mit zwei Pfeilen (recht/links) in die jeweilige Richtung steuern kann. Das klappt auch ganz gut, nur möchte ich beim klick auf das Bild ein neues Popup Fenster öffnen und das Bild anzeigen lassen. Im Code wird ja mit der Funktion "MM_callJS(jsStr)" die "grossansicht ()" aufgerufen, aber wie genau funktioniert das und wo muß ich die grossansicht () definieren ?
Code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>marketing</title>
<link rel="stylesheet" type="text/css" href="css/sco.css">
<style type="text/css">
#divUp {position:absolute; left:40px; top:295px;}
#divDown {position:absolute; left:150px; top:295px;}
#divScrollTextCont {position:absolute; left:40px; top:15px; width:155px; height:330px; clip:rect(0px 515px 325px 0px); overflow:hidden; visibility:hidden;}
#divText {position:absolute; left:0px; top:0px;}
</style>
<script src="script/bilder_f.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
/**********************************************************************************
ScrollText
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* Script date: 09/23/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
/*****************
You set the width and height of the divs inside the style tag, you only have to
change the divScrollTextCont, Remember to set the clip the same as the width and height.
You can remove the divUp and divDown layers if you want.
This script should also work if you make the divScrollTextCont position:relative.
Then you should be able to place this inside a table or something. Just remember
that Netscape crash very easily with relative positioned divs and tables.
Updated with a fix for error if moving over layer before pageload.
****************/
//If you want it to move faster you can set this lower, it's the timeout:
var speed = 30
//Sets variables to keep track of what's happening
var loop, timer
//Object constructor
function makeObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;
this.down=goDown;
this.left=goLeft;
this.right=goRight;
this.moveIt=moveIt;
this.x=0;
this.y=0;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";
function moveIt(x,y){
this.x = x
this.y = y
this.css.left = this.x+px
this.css.top = this.y+px
}
//Makes the object go up
function goDown(move){
if (this.y>-this.scrollHeight+oCont.clipHeight){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
//Makes the object go down
function goUp(move){
if (this.y<0){
this.moveIt(0,this.y-move)
if (loop) setTimeout(this.obj+".up("+move+")",speed)
}
}
//Makes the object go left
function goLeft(move){
//if (this.x>0){
this.moveIt(this.x-move, 0)
if (loop) setTimeout(this.obj+".left("+move+")",speed)
//}
}
//Makes the object go right
function goRight(move){
if (this.x<0){
this.moveIt(this.x-move, 0)
if (loop) setTimeout(this.obj+".right("+move+")",speed)
}
}
//Calls the scrolling functions. Also checks whether the page is loaded or not.
function scroll(speed){
if (scrolltextLoaded){
loop = true;
if (speed>0) oScroll.left(speed)
else oScroll.right(speed)
}
}
//Stops the scrolling (called on mouseout)
function noScroll(){
loop = false
if (timer) clearTimeout(timer)
}
//Makes the object
var scrolltextLoaded = false
function scrolltextInit(){
oCont = new makeObj('divScrollTextCont')
oScroll = new makeObj('divText','divScrollTextCont')
oScroll.moveIt(0,0)
oCont.css.visibility = "visible"
scrolltextLoaded = true
}
//Call the init on page load if the browser is ok...
if (bw.bw) onload = scrolltextInit
/***************
Multiple Scripts
If you have two or more scripts that use the onload event, probably only one will run (the last one).
Here is a solution for starting multiple scripts onload:
1. Delete or comment out all the onload assignments, onload=initScroll and things like that.
2. Put the onload assignments in the body tag like in this example, note that they must have braces ().
Example: <body onload="initScroll(); initTooltips(); initMenu();">
**************/
//-->
</script>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#99ccff" text="#000000">
<div id="divUp" style="width: 46; left: 150px; top: 295px; height: 33; z-index: 7">
<a href="#" onmouseover="scroll(1)" onmouseout="noScroll()" onclick="return false">
<img src="htmlimages/images/pf_people_32.gif" width="46" height="33" alt="Up" border="0"></a>
</div>
<div id="divDown" style="width: 46px; left: 40px; top: 295px; height: 33px; overflow: auto; z-index: 8">
<a href="#" onMouseOver="scroll(-1)" onMouseOut="noScroll()" onClick="return false">
<img src="htmlimages/images/pf_people_30.gif" width="46" height="33" alt="Up" border="0"></a></div>
<div id="divScrollTextCont" style="width: 155px; height: 330px; left: 40px; top: 15px; z-index: 9">
<div id="divText">
<table border="0" cellspacing="0" cellpadding="0" width="424">
<tr valign="bottom">
<td width="53"><a href="javascript:;" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/1_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 1" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(6)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/6_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(9)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/9_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(13)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/13_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(17)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/17_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(21)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/21_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(25)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/25_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
<td width="53"><a href="javascript:;" onMouseOver="bild_wechsel(29)" onClick="MM_callJS('grossansicht()')">
<img src="images/fashion/29_klein.jpg" width=45 height=60 vspace="4" hspace="4" alt="Thumb 6" border="0"></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>Bitte um Hilfe.....
Danke und Gruß
Nici
