Фотогалерея с аннотациями и прокруткой текста

Достопримечательности Керчи Пример фотогалереи с аннотациями и прокруткой текста

Просмотр скрипта

BODY{ font-family: Tahoma, Verdana, Arial, MS Sans Serif;   font-size:14; color=red; BACKGROUND-COLOR:#A1FEF9; }
span.1{font-family: Tahoma, Verdana, Arial, MS Sans Serif;   font-size:1; color:red; BACKGROUND-COLOR:#C2FDC2;FONT-WEIGHT: bold}
A:link {FONT-SIZE: 14px; MARGIN: 5px; LINE-HEIGHT: 14px; FONT-FAMILY: arial,helvetica,sans-serif;     COLOR: red; TEXT-DECORATION: none}
A:visited {    FONT-SIZE: 14px; COLOR: blue;  FONT-FAMILY: arial,helvetica,sans-serif;TEXT-DECORATION: none}
A:hover {FONT-SIZE: 14px;    COLOR: red;  FONT-FAMILY: arial,helvetica,sans-serif;TEXT-DECORATION: underline overline; BACKGROUND-COLOR:#FFFF00;}
A:active {FONT-SIZE: 14px;    COLOR: red; FONT-FAMILY: arial,helvetica,sans-serif; TEXT-DECORATION: none}
</style><TITLE>Фотогалерея с аннотациями</TITLE>
</head>
<body bgcolor="#FFFFFF" text="#000000"><font size="4" color="#1E7D02">Достопримечательности Керчи</font>
<script>
document.write('<style type="text/css">');
document.write('#divControl {position:absolute; left:30px; top:60px; width:250px; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;}');
document.write('#divCont    {position:absolute; left:30px;top:120px; width:250px; height:140px; clip:rect(0px 500px 500px 0px);}');
document.write('.clScroll   {position:absolute; font-size:10pt; font-family:arial,helvetica,sans-serif; visibility:hidden;} ');
document.write('</style>');
function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=this.agent.indexOf("Opera 5")>-1
    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=new lib_bwcheck()
timSpeed = 50
contHeight = 150
function makeScrollObj(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.height=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.top=b_gettop                                        
    return this
}
var px = bw.ns4||window.opera?"":"px";
//Getting the top for the top method
function b_gettop(){
    var gleft=(bw.ns4 || bw.ns6)?parseInt(this.css.top):eval(this.css.pixelTop);
    return gleft;
}
//Variables
var scrollTim = 1;
var active = 0;
function scroll(speed){
    clearTimeout(scrollTim)
    way = speed>0?1:0
    if ((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){
        oScroll[active].css.top = (oScroll[active].top()+speed)+px
        scrollTim = setTimeout("scroll("+speed+")",timSpeed)
    }
}
function noScroll(){
    clearTimeout(scrollTim)
}
function changeActive(num){
    oScroll[active].css.visibility = "hidden"
    active = num
    oScroll[active].css.top = 0+px
    oScroll[active].css.visibility = "visible"
}
function scrollInit(){
    oScroll = new Array()
    oScroll[0] = new makeScrollObj('divScroll1','divCont')
    oScroll[1] = new makeScrollObj('divScroll2','divCont')
    oScroll[2] = new makeScrollObj('divScroll3','divCont')
    oScroll[3] = new makeScrollObj('divScroll4','divCont')
    oScroll[0].css.left = 0+px
    oScroll[0].css.top = 0+px
    oScroll[0].css.visibility = "visible"
    oControl = new makeScrollObj('divControl')
    oControl.css.visibility = "visible"
}
onload = scrollInit;
document.write('<div id="divControl">');
document.write('    <a href="#" onclick="changeActive(0); return false">Крепость Керчь</a>');
document.write('    <a href="#" onclick="changeActive(1); return false">Гора Митридат</a>');
document.write('    <a href="#" onclick="changeActive(2); return false">Крепость Ени-кале</a>');
document.write('    <a href="#" onclick="changeActive(3); return false">Царский курган</a>');
document.write('    <br><br>');
document.write('    <a href="#" onmouseover="scroll(5)" onmouseout="noScroll()" onclick="return false"><font size="3" color="#0314DB">вниз</font></a>');
document.write('    <a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()" onclick="return false"><font size="3" color="#0314DB">вверх</font></a>');
document.write('</div><br><br>');
document.write('<div id="divCont">');
document.write('    <div id="divScroll1" class="clScroll">');
document.write('    <p>Это текст при нажатии на первый линк<br>Это текст при нажатии на первый линк<br>Это текст при нажатии на первый линк<br>Это текст при нажатии на первый линк<br>Это текст при нажатии на первый линк<br>Это текст при нажатии на первый линк<br><a href="k1.jpg" width="1000" height="730" ><img src="k1.jpg" width="120" height="130" ></a></p>');
document.write('    </div>');
document.write('<div id="divScroll2" class="clScroll">');
document.write('    <p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><p>Это текст при нажатии на второй линк</p><a href="k3.jpg" width="1000" height="730"><img src="k3.jpg" width="120" height="130" ></a></p>');
document.write('</div>');
document.write('<div id="divScroll3" class="clScroll">');
document.write('<p>Это текст при нажатии на третий линк. <a href=#>Это линк</a></p><p>Это текст при нажатии на третий линк. <a href=#>Это линк</a></p><p>Это текст при нажатии на третий линк. <a href=#>Это линк</a></p><p>Это текст при нажатии на третий линк. <a href=#>Это линк</a></p><p>Это текст при нажатии на третий линк. <a href=#>Это линк</a></p><p>Это текст при нажатии на третий линк. <a href=#>Подробнее</a></p><a href="k4.jpg" width="1000" height="730"><img src="k4.jpg" width="120" height="130"></a></p>');
document.write('<br></div>');
document.write('<div id="divScroll4" class="clScroll">');
document.write('<p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p>Это текст при нажатии на пятый линк</p><p><a href="k5.jpg" width="1000" height="730"><img src="k5.jpg" width="120" height="130" ></a></p> ');
document.write('</div></div>');
</script>
<script language="JavaScript" src="../../c_small.js"></script>