Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 mouseoverPor 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>Carregando comentários...