Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Danielxv

Abrir img com o movimento do mouse

Por , em Desenvolvimento frontend

Recommended Posts

Danielxv    0

Danielxv
Postado

Eu estou fazendo uma pagina com fotos e nos nomes das fotos eu gostaria de colocar um link que não tenha que clicar, conforme passa o mouse no nome ele ja abre a foto.

 

Eu estou tentando colocar o seguinte codigo

 

<div id="mask">			<div id="info" style="position: relative; top: 0px; left: 0px; z-index:1;">			<table width="240" border="0" cellspacing="0" cellpadding="0" align="left">				<tr>					<td align="center" valign="middle" colspan="3" bgcolor="#ffcc00" height="56"><span class="message"><b>TITULO</b></span><br>					</td>				</tr>				<tr>					<td width="8"></td>					<td align="left" width="224">					<span class="message">							<p><a onmouseout="show('foto');" onmouseover="hide('foto');">TITULO DA FOTO</a></p>					</span><br>					</td>					<td width="8"></td>								</tr>			</table>			</div>		<script type="text/javascript" language="javascript1.2"><!--			createDragableLayer(			'<img src="images/FOTO.jpg">', //contents of dragable layer (can contain HTML etc.)			230,					   //left coordinate of dragable layer			140,					  //top coordinate of dragable layer			null,					  //width of dragable layer			null,					   //optional: height of dragable layer (use null for default)			null				 //optional: background colour of dragable layer (use null for default)			);			-->			</script>					</div>

só que o "TITULO DA FOTO" não fica com cor e sublinhado como se fosse um link, o meu amigo que me passo esse codigo ja me mosto esse codigo funcionando em uma outra pagina e a parte onde passava o mouse ficava com cor e sublinhado como se fosse um link mais não podia clicar, era só passar o mouse (eu verifiquei o codigo fonte do site que ele me passo e verifiquei se tinha codigo de cor ou pra sublinhar e não encontrei), por que o site que ele me mostro ficava certo e no meu não?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Danielxv    0

Danielxv
Postado

Na pagina que eu estou fazendo é bem simples (mais pra uso pessoal).

 

Aqui vai os codigos

 

fotos.html

 

<html><head><BASE HREF="fotos.html"><title>Fotos</title><script src="xlib/xdraglayer.js" type="text/javascript" language="javascript1.2"></script><script src="xlib/xgenerics.js" type="text/javascript" language="javascript1.2"></script></head><body>		<div id="mask">			<div id="info" style="position: relative; top: 0px; left: 0px; z-index:1;">			<table width="240" border="0" cellspacing="0" cellpadding="0" align="left">				<tr>					<td align="center" colspan="3" bgcolor="#3399FF" height="56"><span class="message"><b>Lista de Fotos</b></span><br>					</td>				</tr>				<tr>					<td width="8"></td>					<td align="left" width="224">					<span class="message">														<p><a onmouseout="show('carro');" onmouseover="hide('Carro');">Carro</a></p>														<p><a onmouseout="show('emulador');" onmouseover="hide('emulador');">Carro</a></p>					</span><br>					</td>					<td width="8"></td>								</tr>			</table>			</div>		  <script type="text/javascript" language="javascript1.2">						<!--			createDragableLayer(			'<img src="Foto.jpg">', //contents of dragable layer (can contain HTML etc.)			230,					   //left coordinate of dragable layer			140,					  //top coordinate of dragable layer			null,					  //width of dragable layer			null,					   //optional: height of dragable layer (use null for default)			null				 //optional: background colour of dragable layer (use null for default)			);			-->		  </script>			  <script type="text/javascript" language="javascript1.2">						<!--			createDragableLayer2(			'<img src="Carro.jpg">', //contents of dragable layer (can contain HTML etc.)			230,					   //left coordinate of dragable layer			140,					  //top coordinate of dragable layer			null,					  //width of dragable layer			null,					   //optional: height of dragable layer (use null for default)			null				 //optional: background colour of dragable layer (use null for default)			);			-->		  </script>				</div></body></html>

xdraglayer.js

 

function createDragableLayer(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {	if( document.layers ) {		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );	} else {		document.write( '<div id="carro" style="visibility:hidden; position:absolute; cursor:move; z-index:2; left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );	}}function createDragableLayer2(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG) {	if( document.layers ) {		document.write( '<layer left="'+leftPos+'" top="'+topPos+'" width="'+layerWidth+'" '+(layerHeight?('height="'+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG+'" '):'')+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'+layerContent+'</layer>' );	} else {		document.write( '<div id="emulador" style="visibility:hidden; position:absolute; cursor:move; z-index:2; left:'+leftPos+'px;top:'+topPos+'px;width:'+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')+(layerBG?('background-color:'+layerBG+';'):'')+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;" onselectstart="return false;">'+layerContent+'</div>' );	}}function dragMousePos(e) {	if( !e ) { e = window.event; } if( !e || ( typeof( e.pageX ) != 'number' && typeof( e.clientX ) != 'number' ) ) { return [0,0]; }	if( typeof( e.pageX ) == 'number' ) { var xcoord = e.pageX; var ycoord = e.pageY; } else {		var xcoord = e.clientX; var ycoord = e.clientY;		if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) || ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) || window.navigator.vendor == 'KDE' ) ) {			if( document.documentElement && ( document.documentElement.scrollTop || document.documentElement.scrollLeft ) ) {				xcoord += document.documentElement.scrollLeft; ycoord += document.documentElement.scrollTop;			} else if( document.body && ( document.body.scrollTop || document.body.scrollLeft ) ) {				xcoord += document.body.scrollLeft; ycoord += document.body.scrollTop; } } }	return [xcoord,ycoord];}function dragIsDown(e) {	if( ( e && ( e.which > 1 || e.button > 1 ) ) || ( window.event && ( window.event.which > 1 || window.event.button > 1 ) ) ) { return false; }	window.msStartCoord = dragMousePos(e); window.lyStartCoord = this.style?[parseInt(this.style.left),parseInt(this.style.top)]:[parseInt(this.left),parseInt(this.top)];	if( document.captureEvents && Event.MOUSEMOVE ) { document.captureEvents(Event.MOUSEMOVE); document.captureEvents(Event.MOUSEUP); }	window.storeMOUSEMOVE = document.onmousemove; window.storeMOUSEUP = document.onmouseup; window.storeLayer = this;	document.onmousemove = dragIsMove; document.onmouseup = dragIsMove; return false;}function dragIsMove(e) {	var msMvCo = dragMousePos(e); if( !e ) { e = window.event ? window.event : ( new Object() ); }	var newX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord[0] );	var newY = window.lyStartCoord[1] + ( msMvCo[1] - window.msStartCoord[1] );	if( e.type && e.type.toLowerCase() == 'mouseup' ) { document.onmousemove = storeMOUSEMOVE; document.onmouseup = window.storeMOUSEUP; }	if( navigator.product == 'Gecko' ) { window.setTimeout('dragIsMove2('+newX+','+newY+');',1); } else { dragIsMove2(newX,newY); }}function dragIsMove2(x,y) { var oPix = ( document.childNodes ? 'px' : 0 ), theLayer = ( window.storeLayer.style ? window.storeLayer.style : window.storeLayer ); theLayer.left = x + oPix; theLayer.top = y + oPix; }

xgenerics.js

 

var its;var browserName;var browserNameLong;var browserNew;var preloadFlag = false;var Macintosh = navigator.userAgent.indexOf('Mac')>0;// =================================================================================function setIdProperty(id,value){	// when browser is getElementByid compatible use this	document.getElementById(id).style.visibility = value;}// =================================================================================function its() {	var n = navigator;	var ua = ' ' + n.userAgent.toLowerCase();	var pl = n.platform.toLowerCase();	var an = n.appName.toLowerCase();	// browser version	this.version = n.appVersion;	this.nn = ua.indexOf('mozilla') > 0;	// 'compatible' versions of mozilla aren't navigator	if(ua.indexOf('compatible') > 0) 	{		this.nn = false;	}		this.opera = ua.indexOf('opera') > 0;	this.ie = ua.indexOf('msie') > 0;	this.major = parseInt( this.version );	this.minor = parseFloat( this.version );	// platform	this.mac = ua.indexOf('mac') > 0;	this.win = ua.indexOf('win') > 0;	// workaround for IE5 which reports itself as version 4.0	if(this.ie) 	{		if(ua.indexOf("msie 5") > 1) 		{			var msieIndex = navigator.appVersion.indexOf("MSIE") + 5;			this.major = parseFloat(navigator.appVersion.substr(msieIndex,3));		}	}	return this;}// =================================================================================function browserNaming() {	its = new its();		// is it a DOM-enabled browser?	if (!document.getElementById) 	{		browserNew = false;	}	else 	{		browserNew = true;	}	// need the name, too	if (its.opera) 	{		browserName = "Opera";	}	else if (its.ie) 	{		browserName = "IE";	}	else 	{		browserName = "NS";	}	// and the number	browserNameLong = browserName + its.major;}// =================================================================================function UI_reloadPage(init) {	if (init==true) with (navigator)	{		if ((appName=="Netscape")&&(parseInt(appVersion)==4)) 		{			document.UI_pgW=innerWidth; 			document.UI_pgH=innerHeight; 			onresize=UI_reloadPage; 		}	}	else if (innerWidth!=document.UI_pgW || innerHeight!=document.UI_pgH)	{		location.reload();	}}UI_reloadPage(true);// =================================================================================function hide(id) {	if (browserNew) 	{		setIdProperty(id,"hidden");	}	else 	{		if (browserName == "NS") 		{ 			document.layers[id].visibility = "hide";		}		else 		{			document.all[id].style.visibility = "hidden"; 		}	}}// =================================================================================function show(id){	if (browserNew) 	{		setIdProperty(id,"visible");	}	else 	{		if (browserName == "NS") 		{ 			document.layers[id].visibility = "show"; 		}		else		{			document.getElementById(id).style.visibility = "visible";		}	}}

Cria uma pasta e coloca o html, cria outra pasta com o nome de xlib com os 2 js, pega duas img e coloca o nome em uma delas de Carro.jpg e na outra Emulador.jpg e coloca junto do html.

 

Outro problema que eu tenho tido é que as img fica sobreposta tendo que tirar uma delas da frente para poder ver a outra.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Ajudem por favor.

Disponibilize isso pra gente... Nos passe um link... É muito melhor... Muitas vezes não dá pra ficar salvando os códigos passados... Por isso pedimos o link... Quando solicitamos que sejam passados os códigos e o link, é pra facilitar ainda mais... Compreende?E outra: como são utilizadas imagens, é melhor mesmo que seja disponibilizado um link, pois é bom que possamos ver onde está o problema, sem termos que ficar deduzindo, e muito menos ficar criando imagens para substituir...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito