Texte sur l'image en utilisant jquery et css

Im en utilisant le tutoriel http://www.webdesignlondon-tristar.co.uk/website-design-london/insane-jquery-image-rollover.Texte sur l'image en utilisant jquery et css

Je veux un fondu/noircissement de l'image au survol et pour que le texte apparaisse comme dans le tutoriel. Cependant, pour une raison quelconque, je n'arrive pas à le faire fonctionner même lorsque vous démarrez un document vierge.

Ce n'est pas la première fois que j'utilise jquery alors je suis confus pourquoi je n'arrive pas à le faire fonctionner.

J'ai utilisé tout le code ensemble;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 

<style type="text/css"> 
.wrapper   { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width:300; height: 300; margin: 0 auto; } 
.wrapper:hover  { cursor: pointer; } 
.description  { display: none; background-color: #000; color: #000; position: absolute; left: 8px; top: 8px; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; } 
.description img { vertical-align: middle; margin: 0 2px 1px 0; } 

</style> 

<script src="jquery-1.3.1.min.js" type="text/javascript"> 
$(document).ready(function(){ 
    $('.wrapper').hover(function(){ 
     $(this).children('.description').stop().fadeTo(200, 0.8); 
    },function(){ 
     $(this).children('.description').stop().fadeTo(200, 0); 
    }); 
}); 
</script> 

</head> 



<body> 
<div class="wrapper"> 
<img src="http://www.compuhex.co.uk/Version2/products2/blue.PNG" alt="Product 1" /> 
<a href="#" title="Click for More" class="description"> 
Want to read more? 
</a> 
</div> 

</body> 
</html>

le lien direct peut être vu sur http://www.compuhex.co.uk/Version2/hovertext/

désolé si le code est en désordre.

Merci pour tous les types d'aide

Pour résumer Je cherche à comprendre pourquoi le code isnt de travail, même si elle est une copie du site de tutoriel. La technique montrée est la chose EXACT que je veux faire à mon site Web. Merci

Source

2012-06-14 memyselfandmyiphone

En utilisant une ancienne version de jQuery (1.3.1), il fonctionnera (comme il se doit) comme prévu avec une version> 1.4;

http://jsfiddle.net/dwrUj/

vous devez séparer les deux, par exemple en vous par exemple votre enroulant votre code ready dans l'élément <script src=.., de:

<script src="jquery-1.7.2.min.js" type="text/javascript"> 
    $(document).ready(function(){ 
    ... 
</script>

à:

<script src="jquery-1.7.2.min.js" type="text/javascript"></script> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
    ... 
</script>

Source

2012-06-14 11:03:34

hey alex, je mis à jour à jquery-1.7.2.min.js et transféré sur http://www.compuhex.co.uk/ Version2/hovertext/mais il n'apparaît toujours pas. pourquoi cela fonctionnerait-il dans le violon mais pas dans le navigateur? Est-ce que je rate un code de base clé? Merci Alex – memyselfandmyiphone

Ah vous avez un peu douteuse

Remplacer ur code comme

<script src="jquery-1.3.1.min.js" type="text/javascript"></script> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$('.wrapper').hover(function(){ 


$(this).children('.description').stop().show().fadeTo(200, 0.8); 
},function(){ 
    $(this).children('.description').stop().hide().fadeTo(200, 0); 
}); 


    }); 
</script>

Il travaille fine..Version est pas un problème

Source

2012-06-14 12:25:34

Questions connexes

Texte sur l'image en utilisant jquery et css

Répondre

Questions connexes