Experiências

barrote · August 27, 2013 at 08:50 PM

Tive a fazer umas experiências com um ficheiro de HTML que criei, mas quando fui a fazer o código em Javascript já não consegui por nada daquilo a funcionar. Deixo-te aqui todo o meu código mas, sem CSS.

O que isso basicamente tem de fazer e quando passas com o cursor por cima da imagem, aparece um "+" e isso vai expandir para a informação dessa mm img.

<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
</head>
<link href="css/main.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document). ready(function(){
$("div.popup").show();

var autoTimer = null;

autoTimer = setTimeout(function(){
$("div.popup").slideLeft("slow");
},2000);

$("div#open").click(function(){
$("div.popup").slideRight("slow");
$("div#open").hide();
$("a.close").show();
if(autoTimer) clearTimeout(autoTimer);
autoTimer = null;
});

$("a.close").click(function(){
$("div.popup").slideLeft("slow");
$("div#open").show();
$("a.close").hide();
if(autoTimer) clearTimeout(autoTimer);
autoTimer = null;
});
});
</script>
<title>Index</title>
<body>
<div class="popup">
<div class="article">
<div class="box">
<img class="left" src="img/01.1.jpg"/>
<div class="info">
<a class="close">x</a>
<div class="column">
<div class="col01">
<em class="ttl">Nome</em>
<strong>Jalapeno</strong>
</div>
<div class="col02">
<em class="ttl">Idade</em>
<strong>1</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="test">
<ul class="list">
<li>
<img src="img/01.jpg"/>
<div id="open" style="left:149px; top:136px;">+</div>
</li>
</ul>
</div>
</body>
</html>

Resposta

Rechousa · August 28, 2013 at 12:36 AM

Olá,

Para além de não enviares a CSS, não enviaste as imagens...

Bem, agora a sério:

a) não é suposto se pedirem para fazer trabalhos. De acordo com as regras da comunidade , no ponto 2.3 diz o seguinte:

"Não é permitida a criação de tópicos ou colocação de mensagens a pedir que se façam trabalhos. Pedir ajuda é diferente de pedir trabalhos feitos. Em caso de incumprimento o staff pode bloquear, ou mesmo apagar, o tópico/mensagem."

b) Relativamente ao teu problema, vê isto:

http://www.w3schools.com/jquery/event_mouseover.asp

Espero ter ajudado,

Sign In

Experiências

Recommended Posts

barrote

Rechousa

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information