ďťż

Jak zrobić skrypt podobny ze strony interii http://www.interia.pl

       

Podstrony


telcocafe

Jak już pewnie wiecie od jakiegoś czasu zmienił się design interii.pl
hodzi mi o to i to
1. to menu niebieskie
2.po lewej przewijanie komentarzy

Jak coś takiego zrobić?



1. css + onmouse coś tam w js :) czyli if mysza nade mną to pokaż warstwę css
2. podobnie :)


1. css + onmouse coś tam w js :) czyli if mysza nade mną to pokaż warstwę css
2. podobnie :)

1.
Do jakiegos pliku ze stroną daj do head:
<script src="gpe.js"></script>
A tam, gdzie chcesz wstawić text:
<span onmouseover="gpe('text:tresc dymka;')">najedź</span>
No i plik gpe.js: ^_^
function displayConfig() { //KONFIGURACJA START //Odstęp popup'a od kursora w poziomie if ((popupOffsetX=getValue("popupOffsetX"))==NA) popupOffsetX=10 //Odstęp popup'a od kursora w pionie if ((popupOffsetY=getValue("popupOffsetY"))==NA) popupOffsetY=10 //Położenie popup'a względem myszki if ((popupAlign=getValue("popupAlign"))==NA) popupAlign="right" //Inne opcje - left, center //Długość popup'a if ((popupWidth=getValue("popupWidth"))==NA) popupWidth=160 //Szerokość obramowania całego popup'a if ((popupBorderWidth=getValue("popupBorderWidth"))==NA) popupBorderWidth="1px" //Kolor obramowania popup'a if ((popupBorderColor=getValue("popupBorderColor"))==NA) popupBorderColor="#333399" //Styl obramowania popup'a (dotted, double...) if ((popupBorderStyle=getValue("popupBorderStyle"))==NA) popupBorderStyle="solid" //Domyślna przeźroczystość popup'a if ((popupOpacity=getValue("popupOpacity"))==NA) popupOpacity=100 //Kolor czcionki nagłówka if ((captionColor=getValue("captionColor"))==NA) captionColor="#ffffff" //Styl czcionki nagłówka if ((captionFontStyle=getValue("captionFontStyle"))==NA) captionFontStyle="normal" //Pogrubienie czcionki nagłówka if ((captionFontWeight=getValue("captionFontWeight"))==NA) captionFontWeight="bold" //Wielkość czcionki nagłówka if ((captionFontSize=getValue("captionFontSize"))==NA) captionFontSize="9px" //Czcionka nagłówka if ((captionFontFamily=getValue("captionFontFamily"))==NA) captionFontFamily="Verdana, sans-serif" //Wypełnienie ogólne if ((captionPadding=getValue("captionPadding"))==NA) captionPadding="0px"; //Kolor tła nagłówka if ((captionBackgroundColor=getValue("captionBackgroundColor"))==NA) captionBackgroundColor=popupBorderColor //Tło nagłówka if ((captionBackgroundImage=getValue("captionBackgroundImage"))==NA) captionBackgroundImage="" //Dodatki do tła if ((captionBackgroundImageProperties=getValue("captionBackgroundImageProperties"))==NA) captionBackgroundImageProperties="" //Kolor czcionki tekstu if ((textColor=getValue("textColor"))==NA) textColor="#000000" //Styl czcionki tekstu if ((textFontStyle=getValue("textFontStyle"))==NA) textFontStyle="normal" //Pogrubienie czcionki tekstu if ((textFontWeight=getValue("textFontWeight"))==NA) textFontWeight="normal" //Wielkość czcionki tekstu if ((textFontSize=getValue("textFontSize"))==NA) textFontSize="10px" //Czcionka tekstu if ((textFontFamily=getValue("textFontFamily"))==NA) textFontFamily="Tahoma" //Wypełnienie ogólne if ((textPadding=getValue("textPadding"))==NA) textPadding="2px"; //Kolor tła tekstu if ((textBackgroundColor=getValue("textBackgroundColor"))==NA) textBackgroundColor="#ccccff" //Tło tekstu if ((textBackgroundImage=getValue("textBackgroundImage"))==NA) textBackgroundImage="" //Dodatki do tła if ((textBackgroundImageProperties=getValue("textBackgroundImageProperties"))==NA) textBackgroundImageProperties="" //fadeIn if ((fadeIn=params.indexOf("fadeIn"))!=-1) fadeIn=true //Domyślny czas fadeIn if (fadeIn && ((fadeInTime=getValue("fadeInTime"))==NA)) fadeInTime=1 //fadeOut if ((fadeOut=params.indexOf("fadeOut"))!=-1) fadeOut=true //Domyślny czas fadeOut if (fadeOut && ((fadeOutTime=getValue("fadeOutTime"))==NA)) fadeOutTime=1 //DODATKOWE SZATY layout[1]="textBackgroundColor: #ffffe1; popupBorderColor: #000000; textFontFamily: verdana; textFontSize: 11px;" layout[2]="textFontStyle: italic;" //KONFIGURACJA KONIEC } document.write("<div id=\"popupDiv\" style=\"position: absolute; display: none; z-index: 1000; filter: alpha(opacity=100); -moz-opacity: 1;\">GPE v1.1 - popup engine</div>") popup=document.getElementById("popupDiv") OP=NS=IE=false if (navigator.userAgent.indexOf("Opera")!=-1) OP=true else if (navigator.appName=="Netscape") NS=true else if (navigator.appName=="Microsoft Internet Explorer") IE=true function gpe(arguments) { fadingIn=false fadeOut=false params=arguments layout=new Array() captionClass=getValue("captionClass") caption=getValue("caption") textClass=getValue("textClass") text=getValue("text") popupLayout=getValue("popupLayout") if (popupLayout!=null) params+=grabLay() NA=null displayConfig() if (popupBorderColor==NA && captionBackgroundColor!=NA) popupBorderColor=captionBackgroundColor po=eval(popupOpacity) if (NS) NSpo=(po/100) if (textBackgroundImage!=null) textBackgroundImage="url('"+textBackgroundImage+"') "+textBackgroundImageProperties+"" if (captionBackgroundImage!=null) captionBackgroundImage="url('"+captionBackgroundImage+"') "+captionBackgroundImageProperties+"" popupContent="<table cellpadding=0 cellspacing=0 style=\"width: "+popupWidth+"; border: "+popupBorderWidth+" "+popupBorderStyle+" "+popupBorderColor+";\">" if (caption!=NA) { popupContent+="<tr><td " if (captionClass==null) popupContent+="style=\"color: "+captionColor+"; font: "+captionFontStyle+" "+captionFontWeight+" "+captionFontSize+" "+captionFontFamily+"; padding: "+captionPadding+"; background: "+captionBackgroundColor+" "+captionBackgroundImage+";\"" else popupContent+="class=\""+captionClass+"\"" popupContent+=">"+caption+"</td></tr>" } popupContent+="<tr><td " if (textClass==null) popupContent+="style=\"color: "+textColor+"; font: "+textFontStyle+" "+textFontWeight+" "+textFontSize+" "+textFontFamily+"; padding: "+textPadding+"; background: "+textBackgroundColor+" "+textBackgroundImage+";\"" else popupContent+="class=\""+textClass+"\"" popupContent+=">"+text+"</td></tr></table>" if (NS) { content=document.createRange(); content.setStartBefore(popup); content=content.createContextualFragment(popupContent); with (popup) { if (hasChildNodes()) removeChild(lastChild) appendChild(content) } } else popup.innerHTML=popupContent pO(po) if (IE) gpePos() document.onmousemove=function gpePos(evt) { if (NS) { coordX=evt.pageX coordY=evt.pageY winWidth=innerWidth } else { coordX=event.clientX+document.body.scrollLeft coordY=event.clientY+document.body.scrollTop winWidth=document.body.clientWidth } switch (popupAlign) { case "left" : if (coordX-popupWidth-popupOffsetX<0) coordX=popupWidth+popupOffsetX coordX-=popupWidth+(popupOffsetX*2) break case "center" : if (coordX+popupWidth/2>winWidth) {coordX=winWidth-popupWidth/2; popupOffsetX=0} if (coordX-popupWidth/2<0) {coordX=popupWidth/2; popupOffsetX=0} coordX-=popupWidth/2+popupOffsetX break case "right" : if (coordX+popupWidth+popupOffsetX>winWidth) coordX=winWidth-popupWidth-popupOffsetX } popup.style.left=coordX+popupOffsetX popup.style.top=coordY+popupOffsetY } popup.style.display="block" if (fadeIn==true) { pO(0) fade(1) } popup.style.display="block" document.onmouseout=function() { if (fadeOut==true) { if (fadeIn) fadeIn=false else pO(po) fade(2) } else popup.style.display="none" } } function getValue(keyWord) { with (params) { if (indexOf(keyWord+":")==-1) return keyInd=lastIndexOf(keyWord+":") value=substring(keyInd+(keyWord.length+1),indexOf(";",keyInd)) } while (value.indexOf("|:|")!=-1) { with (value) { value=substring(0,indexOf("|:|"))+";"+substring(indexOf("|:|")+3) } } while (value.indexOf(" ")!=-1 && keyWord!="text" && keyWord!="caption") { with (value) { value=substring(0,indexOf(" "))+substring(indexOf(" ")+1) } } if (keyWord=="popupOffsetX" || keyWord=="popupOffsetY" || keyWord=="popupWidth") { value=eval(value) } return value } function grabLay() { layParam=displayConfig+"" with (layParam) { layParam=substring(indexOf("layout["+popupLayout+"]"),indexOf(";\ "",indexOf("layout["+popupLayout+"]"))+1) } return layParam; } function fade(num) { if (num==1 && fadeIn==true) { if (pO()!=po) { pO(2,"+") fadingIn=setTimeout("fade(1)",fadeInTime) } else fadeIn=false } if (num==2 && fadeOut==true) { if (pO()!=0) { pO(2,"-") fadingOut=setTimeout("fade(2)",fadeOutTime) } else { fadeOut=false if (NS==false && IE==false) popup.style.display="none" } } } function pO(oL,op) { if (IE) { with (popup.filters.alpha) { if (oL==NA) return opacity if (op==NA) opacity=oL if (op=="+") { if (opacity>=po) opacity=po else opacity+=oL } if (op=="-") opacity-=oL } } else if (NS) { with (popup.style) { if (oL==NA) return MozOpacity else oL=(oL/100) if (op==NA) MozOpacity=oL if (op=="+") { if (MozOpacity>=NSpo) MozOpacity=NSpo else MozOpacity=parseFloat(MozOpacity)+oL } if (op=="-") MozOpacity=parseFloat(MozOpacity)-oL } } else return false }

2.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <title>Panel z zakładkami na stronie</title> <style> .wszystko{ position: relative; width: 400px; height: 200px; background-color: yellow ; } .zakladka{ float:left; border:1px solid yellow; padding-left:5px; padding-right:5px; cursor: pointer; } .ostatnia{ background-color: white; border:1px solid white; } .panel{ padding:5px; display:none; text-align:left; } </style> <script> var ile=3; function uaktywnij(P) { for (var i=1;i<=ile;i++) { var panel=document.getElementById('panel'+i); var zakladka=document.getElementById('zakladka'+i); if (i==P) { panel.style.display='block'; zakladka.style.backgroundColor='yellow'; zakladka.style.color='black'; } else { panel.style.display='none'; zakladka.style.backgroundColor='#EDEB96'; zakladka.style.color='#888888'; } } } </script> </head> <body onload="uaktywnij(1);"> Dowolna tre¶ć strony. <center> <div class="wszystko"> <div id="zakladka1" class="zakladka" onclick="uaktywnij(1);">Zakładka 1</div> <div id="zakladka2" class="zakladka" onclick="uaktywnij(2);">Zakładka 2</div> <div id="zakladka3" class="zakladka" onclick="uaktywnij(3);">Zakładka 3</div> <div class="ostatnia">&nbsp;</div> <div class="panel" id="panel1" >Tre¶ć panelu zwi±zanego z pierwsz± zakładk±</div> <div class="panel" id="panel2" >Dane dotycz±ce drugiej zakładki</div> <div class="panel" id="panel3" >Tre¶ć trzeciej zakładki</div> </div> </center> Dalsza tre¶ć strony. </body> </html>
Użytkownik virus_jc edytował ten post 26 listopad 2005, 19:22


http://www.dynamicdrive.com
Tam widziałem te pierwsze.


http://www.dynamicdrive.com
Tam widziałem te pierwsze.

Tak w ogóle: to nie lepiej jakbyś wziął Plik > Zapisz jako... i sobie znalazł skrypt z przykładem użycia :blink: :)


A dokładnie które? ;)


http://www.dynamicdr...dhtmlwindow.htm

Weź sobie wyświetl źródło strony i szukaj tam. Taka moje rada , ja tak wiele razy robie. Oczywiście nie zawsze jest to czego sie szuka, ale spróbować można.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.