Ir para conteúdo

POWERED BY:

Arquivado

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

Weblur

Surra com hover

Por , em Javascript

Recommended Posts

Weblur    0

Weblur
Postado

Olá pessoal

 

Estou desenvolvendo um sistema de votação onde as pessoas escolherão uma música para votar. O sistema é em asp e é bem velhinho, mas tá rodando certinho.

 

Eis o esquema:

 

(x) musica 1 / play / imagem 1 (oculta)

( ) musica 2 / play / imagem 2 (oculta)

São 25 opções.

 

 

Bem, o problema é o seguinte: ao passar o mouse sobre o nome da música 1, deve aparecer no hover a imagem 1 (q por padrão, todas devem estar ocultas). E assim com as demais. Tentei via jquery algumas opções, mas não consegui. Acredito q o comando correto seja o each, mas não consegui de maneira nenhuma.

 

 

No cód q envio abaixo, ele apenas exibe a primeira imagem (pq tá com o comando de first), mas preciso q ao clicar em música 2, ele faça um hide em todas e só exiba a imagem 2.

 

Para melhor compreensão, deixo aqui as variáveis:

 

<a href="#"><%=vAnswers(nCount)%></a> aqui é o link q deve ter mouseover

<img src='<%=vLinks(nCount)%>' class="img"> aqui é a imagem q deve aparecer no mouseover

 

Por favor, me ajudem?? Virei a noite tentando resolver isso. :(

 

 


<style type="text/css" media="all">

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

#botao{
width:56px;
height:25px;
background:url(bt.png) no-repeat;
border:none;
cursor:pointer;
font:12px Arial, Helvetica, sans-serif;
}

#botao:hover{
background:url(bt.png) no-repeat 0 -25px;
}	

h1 {
width:100%;
padding-left:0px;
padding-right:0px;
padding-top:20px;
left:10px;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
height:auto;
padding-bottom: 18px;	
margin-bottom: 0px;
}	

#enq{
width:100%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
top: -100px;
left:10px;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
height:auto;
padding-bottom: 10px;	
float:clear;
margin-bottom: 0px;
}


#dir{
width:35%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
left:10px;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
height:auto;
padding-bottom: 0px;	
float:left;
margin-bottom: 0px;
}

#left{
width:65%;
padding-left:0px;
padding-right:0px;
padding-top:0px;
left:0px;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
height:auto;
padding-bottom: 0px;	
float:left;
margin-bottom: 0px;
}

img{
border: 1px solid #818483;
left:0px;
top: 0px;
width:18px;
height:18px;
position:relative;

}

.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox2.png) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(radio2.png) no-repeat;
}
.select {
position: absolute;
width: 158px; 
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(select2.png) no-repeat;
overflow: hidden;
}

a{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 12px;
color: #ffffff;
height:auto;
}


.clear{
clear: both;
float: none;
}

</style>
<link href="botao.css" rel="stylesheet" type="text/css">
<link href="glass.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/custom-form-elements.js"></script>

<script type="text/javascript"> 
  $(document).ready(function() { 
          $(".img").hide();

          $("a:first").hover(function() { 

          $(".img:first").show(); 
	   }, function() {
	   $(".img:first").hide();
  }); 
  }); 
  </script> 

<body style="background-color: transparent">



 <form method="POST" action="enquete_exe.asp">

<h1> <b><%=sQuestion%></b></h1>



         <%
   Dim nCount
   Dim nDef
   For nCount=1 To 25 
   	If vAnswers(nCount) <> "" and vLinks(nCount) <> "" and vToca(nCount) <> "" Then
	      %>


      <div id="dir"> 
         <input type="radio" class="styled" value="<%=nCount%>" <%If nDef = False Then %>checked<%End If%> name="R1">

         <!-- -------- aqui é o link q deve ter mouseover-------- -->
         <b><a href="#"><%=vAnswers(nCount)%></a> </b>        

      </div> <!--fecha dir -->





 <div id="left"> 



<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="25" height="20">
 <param name="movie" value="<%=vToca(nCount)%>">
 <param name="quality" value="high">
 <param name="wmode" value="transparent">
 <embed src="<%=vToca(nCount)%>" quality="high" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="25" height="20"></embed>
</object>


<img src='<%=vLinks(nCount)%>' class="img">  <!-- -------- aqui é a imagem q deve aparecer no mouseover-------- -->

<div class="clear">  </div> 

</div> <!--fecha left -->




       <%
   	nDef = True
   	End If
 		Next
  		%> 




            <input name="B1" id="botao" type="submit" class="cssbutton" value=" ">
       <font face="Arial, Helvetica" size="2" color="#000000">  </font></form>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Progjunior Daniel    34

Progjunior Daniel
Postado

seria isso?

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {

    $('#radio').hover(
        function () {
          $('#theDiv').prepend('<img id="theImg" src="imagem1.gif" />')
        }, 
        function () {
          $("#theImg").hide();
        }
    );

 $('#radio2').hover(
        function () {
          $('#theDiv').prepend('<img id="theImg2" src="imagem2.jpg"/>')
        }, 
        function () {
          $("#theImg2").hide();
        }
    );

  });

</script>
</head>
<body>
<input type="radio" id="radio"> <input type="radio" id="radio2">
<div id="theDiv">

</div>
</body>
</html>

 

Esse é o modo mais facil, agora 1 so mudando só nome, voce terá que pegar o id de cada radio para colocar o nome na imagem.

Compartilhar este post

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

Informação importante

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

  Aceito