insertar texto

[trekbcn]

Saludos a tod@s
Quisiera saber como insertar un documento html, dentro de otro documento html. Vendría a ser como un iframe, pero quisiera que el rollover no apareciera y en su lugar apareciera dos flechas [una hacia arriba y otra hacia abajo]. De modo que solo poniendo el cursor encima de una de ellos el texto suba o baje dependiendo de la flecha que marque el cursor. No sé si me explico bien.

Alguien me puede orientar?
Gracias de antemano.
trekbcn

[casf79]

Tienes alguna página de muestra?
Más o menos se lo que quieres decir, pero eso lo he visto en flash (y de flash yo no controlo) y me interesaría verlo en html.

[lobo_php]

men eso preguntalo en el foro de javascript para esos efectos se usa JS. html es estatico si qieres codigo dinamico no lo hagas aca.

[casf79]

Iniciado por lobo_php

men eso preguntalo en el foro de javascript para esos efectos se usa JS. html es estatico si qieres codigo dinamico no lo hagas aca.

Hay tantas maneras de decir las cosas "men"
La cosa está en que está haciendo una web en html y ha preguntado

[trekbcn]

pues no recuerdo ninguna dirección de ejemplo, casf. En cualquier caso trasladaré la pregunta a java, siguiendo el consejo de lobo_php. Gracias a ambos. No obstante si alguien sabe algo que me responda x aki, también.
saludos.

[lobo_php]

mira creo q para una persona normal, (no extraordinariamente inteligente y creativa) necesitara codigo html para hacer una web.
pero. uno nunca puede haacer efectos como el q qiere hacer trekbcn por etiquetas html. simplemene necesita de la ayuda de javascript para hacerlo. yo solo trato de ayudarlo, antes de que venga un moderador y lo traslade de foro, le puedo decir que postee en javascript, no java. para que le vayan ayudando.

[poison_mayer]

Esto lo encontré revisando por ahi como siempre digo no borres al autor si te regalan el código al menos da el credito

el easyscroll.js

Código:

/* 

	Easy Scroll v1.0
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	please visit http://cssglobe.com/post/1495/easy-scroll-accessible-content-scroller
	
*/

this.easyscroll = function(){
	
	// id of the container element 
	var id = "myContent";
	
	// navigation buttons text
	var nav = ["Scroll Up", "Scroll Down", "Reset"];
	
	//	id for each navigation button (OPTIONAL)
	var navId = ["btnUp", "btnDown", "btnReset"];

	// movement speed
	var speed = 5;
	
	// desired height of the container element (in pixels)
	var height = 200;
	
	//
	// END CONFIG
	// do not edit below this line (unless you want to of course :) )
	//

	var obj = document.getElementById(id);
	
	obj.up = false;
	obj.down = false;
	obj.fast = false;

	var container = document.createElement("div");
	var parent = obj.parentNode;
	container.id="easyscroll";
	parent.insertBefore(container,obj);
	parent.removeChild(obj);	
	
	container.style.position = "relative";
	container.style.height = height + "px";
	container.style.overflow = "hidden";
	obj.style.position = "absolute";
	obj.style.top = "0";
	obj.style.left = "0";
	container.appendChild(obj);
	
	var btns = new Array();
	var ul = document.createElement("ul");
	ul.id="easyscrollnav";
	for (var i=0;i<nav.length;i++){
		var li = document.createElement("li");
		li.innerHTML = nav[i];
		li.id = navId[i];
		btns.push(li);
		ul.appendChild(li);
	};
	parent.insertBefore(ul,container);
	
	btns[0].onmouseover = function(){
		obj.up = true;
		this.className = "over";
	};
	btns[0].onmouseout = function(){
		obj.up = false;
		this.className = "";
	};		
	btns[1].onmouseover = function(){
		obj.down = true;
		this.className = "over";		
	};
	btns[1].onmouseout = function(){
		obj.down = false;
		this.className = "";
	};		
	btns[0].onmousedown = btns[1].onmousedown = function(){
		obj.fast = true;
	};	
	btns[0].onmouseup = btns[1].onmouseup = function(){
		obj.fast = false;
	};		
	btns[2].onmouseover = function(){ 		
		this.className = "over";
	};	
	btns[2].onmouseout = function(){ 		
		this.className = "";
	};		
	btns[2].onclick = function(){ 		
		obj.style.top = "0px";
	};		
		
	this.start = function(){				
		var newTop;
		var objHeight = obj.offsetHeight;
		var top = obj.offsetTop;
		var fast = (obj.fast) ? 2 : 1;
		if(obj.down){		 
			newTop = ((objHeight+top) > height) ? top-(speed*fast) : top;	
			obj.style.top = newTop + "px";
		};	
		if(obj.up){		 
			newTop = (top < 0) ? top+(speed*fast) : top;
			obj.style.top = newTop + "px";
		};
	};	
	obj.interval = setInterval("start()",50);		
		
};


//
// script initiates on page load. 
//

this.addEvent = function(obj,type,fn){
	if(obj.attachEvent){
		obj['e'+type+fn] = fn;
		obj[type+fn] = function(){obj['e'+type+fn](window.event );}
		obj.attachEvent('on'+type, obj[type+fn]);
	} else {
		obj.addEventListener(type,fn,false);
	};
};
addEvent(window,"load",easyscroll);

y el html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Scroll v1.0 - Unobtrusive content scroller</title>
<meta name="description" content="This script converts long content into short scrollable content">
<script type="text/javascript" src="easyscroll/easyscroll.js"></script>
</meta>

<style>

body{
	margin:0;
	padding:0;
	font:80% Arial, Helvetica, sans-serif;	
	background:#fff;
	color:#333;
	line-height:180%;
	height:100%;	
	overflow:visible;
	text-align:center;
	}
#container{
	margin:0 auto;
	text-align:left;
	width:800px;
	padding-top:2em;
	z-index:10;
}
h1{
	font-size:250%;
	font-weight:normal;
	color:#000;
	margin-top:0;
}
h2{
	font-size:200%;
	font-weight:normal;
	color:#000;
}


/* easyscroll */

#easyscroll{
	background:#eee;
	margin:1em 0;
	/* add additional styling */
	}	

	/* easyscroll navigation buttons */	

	#easyscrollnav, #easyscrollnav li{
		height:28px;
		line-height:28px;
		margin:0;	
		padding:0;
		}	
	#easyscrollnav{
		margin:1em 0;	
		}			
	#easyscrollnav li{
		list-style:none;
		float:left;
		background:#eee;
		margin-right:10px;		
		padding:0 10px;
		color:#333;
		cursor:pointer;
		}					
	#easyscrollnav li.over{
		color:#999;
		text-decoration:underline;
		}							

	/* // easyscroll navigation buttons */	

/* // end easyscroll */


</style>
</head>
<body>

<div id="container">
	
	<h1>Easy Scroll v1.0 - Unobtrusive content scroller</h1>

	<p>This is a demonstration of an unobtrusive content scroller. To apply this script you need to</p>
	<ul>
		<li>Create a div (or any other container element)</li>
		<li>Assign id to that container (default is "myContent")</li>
		<li>Adjust it's height in javascript config area</li>
		<li>Put some content inside the container.</li>
	</ul>
	You may also want to style it with css to improve it's appearance.<br />
	The content is fully accessible to users with JavaScript disabled browsers.</p>

	
	<div id="myContent">
	
		<h2>Scroll content with simple JavaScript function</h2>
	
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus, purus non tincidunt mattis, 
		odio ipsum euismod ipsum, eget suscipit dui orci vitae urna. Vivamus et ipsum at mauris interdum dapibus. 
		Morbi lectus. Quisque id ante commodo nulla eleifend posuere. Donec quis augue sit amet neque mollis ornare. 
		Nam gravida rhoncus velit. In magna. Nulla semper tristique elit. Aenean euismod. Maecenas nunc sapien, 
		nonummy vel, nonummy in, ultrices tristique, odio.		</p>
		<p>
		Phasellus bibendum. Cras accumsan massa venenatis lectus bibendum elementum. Nulla id justo. 
		Nunc ante nisl, rhoncus vel, ultrices at, consequat ut, nunc. Vestibulum dolor. Aenean elementum 
		malesuada elit. Mauris turpis. Morbi vel nulla. Fusce sit amet quam. Etiam vel diam. 
		Praesent tortor. Nulla nisi arcu, nonummy at, dignissim at, elementum ut, leo. 
		Nunc odio nibh, cursus vitae, ultricies et, blandit et, leo.</p>
		
		<h2>Easy Scroll v1.0</h2>
		
		<p>
	lobortis, suscipit eget, consequat vitae, eros. Nunc cursus fringilla nisi. Morbi pharetra, 
		ipsum vel imperdiet elementum, sapien augue adipiscing magna, vitae tempus sapien sapien sit 
		amet magna. Fusce diam tortor, fermentum non, sollicitudin id, feugiat ac, felis. Maecenas 
		accumsan velit at risus. Proin in augue ut lacus auctor eleifend. Duis lectus.</p>
		
		<h2>Features up and down scroll, reset button and double speed</h2>
	
		<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dapibus, purus non tincidunt mattis, 
		odio ipsum euismod ipsum, eget suscipit dui orci vitae urna. Vivamus et ipsum at mauris interdum dapibus. 
		Morbi lectus. Quisque id ante commodo nulla eleifend posuere. Donec quis augue sit amet neque mollis ornare. 
		Nam gravida rhoncus velit. In magna. Nulla semper tristique elit. Aenean euismod. Maecenas nunc sapien, 
		nonummy vel, nonummy in, ultrices tristique, odio.		</p>
		<p>
		Phasellus bibendum. Cras accumsan massa venenatis lectus bibendum elementum. Nulla id justo. 
		Nunc ante nisl, rhoncus vel, ultrices at, consequat ut, nunc. Vestibulum dolor. Aenean elementum 
		malesuada elit. Mauris turpis. Morbi vel nulla. Fusce sit amet quam. Etiam vel diam. 
		Praesent tortor. Nulla nisi arcu, nonummy at, dignissim at, elementum ut, leo. 
		Nunc odio nibh, cursus vitae, ultricies et, blandit et, leo.</p>
		
		<h2>Totally accessible content scroller</h2>
		
		<p>
		Nulla velit velit, vehicula sit amet, tincidunt non, nonummy semper, massa. Cras accumsan. Nulla 
		faucibus lorem ut metus. Nulla felis lectus, tristique a, dapibus ut, pharetra a, nunc. Ut egestas. 
		Sed posuere rhoncus turpis. Vivamus posuere, augue ac viverra blandit, metus dolor malesuada neque, 
		ipsum vel imperdiet elementum, sapien augue adipiscing magna, vitae tempus sapien sapien sit 
		amet magna. Fusce diam tortor, fermentum non, sollicitudin id, feugiat ac, felis. Maecenas 
		accumsan velit at risus. Proin in augue ut lacus auctor eleifend. Duis lectus.</p>		
	
	</div>
		
	<p><em>Roll over buttons for scroll, click and hold for double speed</em></p>
	
	<div id="footer">	
		<p><a href="http://cssglobe.com/post/1495/easy-scroll-accessible-content-scroller" title="read more about content scroller">back to the article</a></p>	
		<p>Easy Scroll is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a></p>
	</div>


</div>
</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script> 

[trekbcn]

gracias, poison_mayer. Lo voy a probar a ver si es esto lo que yo intenté explicar. Saludos cordiales.