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.
Código (HTML):
Resposta
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.
Código (HTML):
<!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>
<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