Web Hosting Reviews & Mac Wordpress Theme | MangoOrange™ `

xat--ayuda

Codigos Java


Java

[Código Javascript] Web Slider

Texto Por Encima De La Pagina 
CÓDIGO:
<script src="http://genelifexd.sqweebs.com/codaslider/jquery-1.2.1.pack.js" type="text/javascript"></script> 
  <script src="http://genelifexd.sqweebs.com/codaslider/jquery-easing.1.2.pack.js" type="text/javascript"></script> 
  <script src="http://genelifexd.sqweebs.com/codaslider/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script> 
  <script src="http://genelifexd.sqweebs.com/codaslider/coda-slider.1.1.1.pack.js" type="text/javascript"></script> 
    

  <!-- 
  The CSS. You can of course have this in an external .css file if you like. 
  Please note that not all these styles may be necessary for your use of Coda-Slider, so feel free to take out what you don't need. 
  --> 
  <link href="http://genelifexd.sqweebs.com/codaslider/slider.css" rel="stylesheet" type="text/css" /> 
  <!-- Initialize each slider on the page. Each slider must have a unique id --> 
  <script type="text/javascript"> 
      jQuery(window).bind("load", function() { 
        jQuery("div#slider1").codaSlider() 
        // jQuery("div#slider2").codaSlider() 
        // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page. 
      }); 
  </script>

<div class="slider-wrap"> 
  <div id="slider1" class="csw"> 
      <div class="panelContainer"> 
      
        <div class="panel" title="Panel 1"> 
            <div class="wrapper"> 
              <h3>Panel 1</h3> 
              <p>Coda-Slider v1.1 by Niall Doherty.</p> 
              <p>For info and usage instructions please see <a href="http://www.ndoherty.com/coda-slider/">ndoherty.com</a></p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#5" class="cross-link" title="Go to Panel 5">« Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next »</a></p> 
            </div> 
        </div> 
        <div class="panel" title="Panel 2"> 
            <div class="wrapper"> 
              <h3>Panel 2</h3> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#1" class="cross-link" title="Go to Panel 1">« Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next »</a></p> 
            </div> 
        </div>      
        <div class="panel" title="Panel 3"> 
            <div class="wrapper"> 
              <h3>Panel 3</h3> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#2" class="cross-link" title="Go to Panel 2">« Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next »</a></p> 
            </div> 
        </div> 
        <div class="panel" title="Panel 4"> 
            <div class="wrapper"> 
              <h3>Panel 4</h3> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#3" class="cross-link" title="Go to Panel 3">« Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next »</a></p> 
            </div> 
        </div> 
        <div class="panel" title="Panel 5"> 
            <div class="wrapper"> 
              <h3>Panel 5</h3> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#4" class="cross-link" title="Go to Panel 4">« Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next »</a></p> 
            </div> 
        </div> 
        <div class="panel" title="Panel 6"> 
            <div class="wrapper"> 
              <h3>Panel 6</h3> 
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.</p> 
              <p>Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.</p> 
              <p><a href="#5" class="cross-link" title="Go to Panel 5">« Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next
»</a></p> 
            </div> 
        </div>  
          
      </div><!-- .panelContainer --> 
  </div><!-- #slider1 --> 
</div><!-- .slider-wrap -->

[Código Javascript] Pequeño comentario en tus escritos


Para hacer esto 

Pegar este code : 

CÓDIGO:
<script type="text/javascript"> 

/*********************************************** 
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) 
* This notice MUST stay intact for legal use 
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

var offsetxpoint=-60 //Customize x offset of tooltip 
var offsetypoint=20 //Customize y offset of tooltip 
var ie=document.all 
var ns6=document.getElementById && !document.all 
var enabletip=false 
if (ie||ns6) 
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : "" 

function ietruebody(){ 
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 


function ddrivetip(thetext, thecolor, thewidth){ 
if (ns6||ie){ 
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px" 
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor 
tipobj.innerHTML=thetext 
enabletip=true 
return false 



function positiontip(e){ 
if (enabletip){ 
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft; 
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop; 
//Find out how close the mouse is to the corner of the window 
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20 
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20 

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000 

//if the horizontal distance isn't enough to accomodate the width of the context menu 
if (rightedge<tipobj.offsetWidth) 
//move the horizontal position of the menu to the left by it's width 
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px" 
else if (curX<leftedge) 
tipobj.style.left="5px" 
else 
//position the horizontal position of the menu where the mouse is positioned 
tipobj.style.left=curX+offsetxpoint+"px" 

//same concept with the vertical position 
if (bottomedge<tipobj.offsetHeight) 
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px" 
else 
tipobj.style.top=curY+offsetypoint+"px" 
tipobj.style.visibility="visible" 



function hideddrivetip(){ 
if (ns6||ie){ 
enabletip=false 
tipobj.style.visibility="hidden" 
tipobj.style.left="-1000px" 
tipobj.style.backgroundColor='' 
tipobj.style.width='' 



document.onmousemove=positiontip 

</script><style type="text/css"> 

#dhtmltooltip{ 
position: absolute; 
width: 150px; 
border: 2px solid black; 
padding: 2px; 
background-color: lightyellow; 
visibility: hidden; 
z-index: 100; 
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/ 
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); 


</style>



Y por ultimo: 

para agregar el comentario y el contenido como agrege : 
CÓDIGO:
<div onmouseout="hideddrivetip()" onmouseover="ddrivetip('Contenido para poner! !!.','lightgreen', 250)" style="padding: 4px; width: 250px; height: 150px; background-color: rgb(233, 233, 233);">Contenido que desees poner !  Textarea ofrecido por warioteayuda !</div> 
<!--webbot 
bot="HTMLMarkup" endspan i-checksum="15497" --> 
<div id="dhtmltooltip"> </div>



En donde dice contenido para poner!! es el pequeño comentario que saldra 

En Contenido que desees poner ! Textarea ofrecido por warioteayuda Es el contenido donde cuando pases el mouse aparezca el comentario 

Aqui dejo uno mas sencillo para que les ayude al princpio : 
CÓDIGO:
<DIV onMouseover = "ddrivetip ( 'El comentario que quieras poner !  !', '# EFEFEF')"; 
  onMouseout="hideddrivetip()">Some text here. onMouseout = "hideddrivetip ()"> 
Contenido aqui ! 
</ Div>


[Codigo Javascript] Secuencia de Mensajes 

El Codigo es El Siguiente 
CÓDIGO:
<html> 
<head> 

<body> 
<script language="JavaScript1.2"> 

var delay=2500 //pausa (en milisegundos) 
var fcontent=new Array() 
begintag='<font face="Verdana" size=2>' //tag que abre los mensajes 
fcontent[0]="<b>Ejemplo...</b><br><br>Este script es muy practico para hacer una rapida presentación de tu sitio web." 
fcontent[1]="Un sitio Web bien presentado puede conseguir visitas mas adaptada a tus contenidos." 
fcontent[2]="La continua actualizacion de un sitio web es uno de los mejores incentivos para el visitante." 
closetag='</font>' 

var fwidth=150 //ancho 
var fheight=150 //alto 

///No editar///////////////// 

var ie4=document.all&&!document.getElementById 
var ns4=document.layers 
var DOM2=document.getElementById 
var faderdelay=0 
var index=0 

if (DOM2) 
faderdelay=2000 

//function to change content 
function changecontent(){ 
if (index>=fcontent.length) 
index=0 
if (DOM2){ 
document.getElementById("fscroller").style.color="rgb(255,255,255)" 
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag 
colorfade() 

else if (ie4) 
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag 
else if (ns4){ 
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag) 
document.fscrollerns.document.fscrollerns_sub.document.close() 


index++ 
setTimeout("changecontent()",delay+faderdelay) 

frame=20; 
hex=255 // Initial color value. 

function colorfade() {   
// 20 frames fading process 
if(frame>0) {   
hex-=12; // increase color value 
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Set color value. 
frame--; 
setTimeout("colorfade()",20);   

else{ 
document.getElementById("fscroller").style.color="rgb(0,0,0)"; 
frame=20; 
hex=255 



if (ie4||DOM2) 
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';padding:2px"></div>') 

window.onload=changecontent 
</script> 

<ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer> 

</body> 
</html>
 

 
Share and Enjoy:

design by perceoz.es.tl tags: ,

Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis