selettore this

F

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Buonasera gente,
ho settato a display none tutti i title perchè vorrei che si visualizzassero al mousehover
visto che sono una decina sto provando con l'attributo THIS però non riesco nel mio intento..

Cosa sbaglio?

Grazie

Codice: 
<style type="text/css">
.title {
display:none; 
}
</style>

<script type="text/javascript">
$(function() {
$(".pad").hover(function() {
$(this).attr('.title').show();
});
});
</script>

</head>
<body bgcolor="#ffffff">
<img name="Fiera" src="Fiera.jpg" width="580" height="290" border="0" id="Fiera" usemap="#m_Fiera" alt="" /><map name="m_Fiera" id="m_Fiera">

<div class="pad">
<area shape="poly" coords="234,66,235,58,264,41,295,61,297,68,269,88,234,66" href="javascript:;" title="Padiglione E" alt="Padiglione E" />
<div class="title">Padiglione E</div>
</div>


<div class="pad">
<area shape="poly" coords="288,200,289,189,313,172,345,190,348,198,320,217,288,200" href="javascript:;" title="Padiglione D" alt="Padiglione D" />
<div class="title">Padiglione D</div>
</div>
 
emanuelevt

emanuelevt

Utente Attivo
24 Giu 2009
298
0
0
L' hover deve contenere due funzioni

Codice: 
.hover(function(){alert('mouse sopra')}, function(){alert('mouse esci')});
 
L

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
Ecco qua! Ho fatto 2 versioni.. una con solo CSS e una con jQuery corretto! dovrebbero funzionare! comunque ho rimosso l'attributo bgcolor su body e width, height e border sull'immagine perché erano inguardabili XD.. Se questa cosa l'hai fatta tu allora ti do un consiglio: ti dovresti aggiornare un po' visto che c'è il CSS per quelle cose!! :)
Comunque questa è fatto con jQuery corretto:
HTML: 
	<style type="text/css">
		body{
			background: #fff;
		}
		#Fiera{
			width: 580;
			height: 290px;
			border: 0px;
		}
		.title {
			display:none; 
		}
	</style>

	<script type="text/javascript">
		$(function(){
			$(".pad").hover(function(){
				$(this).children('.title').show();
			}, function(){
                                $(this).children('.title').hide();
                        });
		});
	</script>

</head>
<body>
	<img name="Fiera" src="Fiera.jpg" id="Fiera" usemap="#m_Fiera" alt="" /><map name="m_Fiera" id="m_Fiera">

	<div class="pad">
		<area shape="poly" coords="234,66,235,58,264,41,295,61,297,68,269,88,234,66" href="javascript:;" title="Padiglione E" alt="Padiglione E" />
		<div class="title">Padiglione E</div>
	</div>


	<div class="pad">
		<area shape="poly" coords="288,200,289,189,313,172,345,190,348,198,320,217,288,200" href="javascript:;" title="Padiglione D" alt="Padiglione D" />
		<div class="title">Padiglione D</div>
	</div>
Mentre questa è fatta solamente con CSS visto che permette di usare anche alcuni eventi come :hover e secondo me è molto meglio ed è anche più corto:
HTML: 
	<style type="text/css">
		body{
			background: #fff;
		}
		#Fiera{
			width: 580;
			height: 290px;
			border: 0px;
		}
		.title {
			display: none; 
		}
		.pad:hover > .title{
			display: block;
		}
	</style>
</head>
<body>
	<img name="Fiera" src="Fiera.jpg" id="Fiera" usemap="#m_Fiera" alt="" /><map name="m_Fiera" id="m_Fiera">

	<div class="pad">
		<area shape="poly" coords="234,66,235,58,264,41,295,61,297,68,269,88,234,66" href="javascript:;" title="Padiglione E" alt="Padiglione E" />
		<div class="title">Padiglione E</div>
	</div>


	<div class="pad">
		<area shape="poly" coords="288,200,289,189,313,172,345,190,348,198,320,217,288,200" href="javascript:;" title="Padiglione D" alt="Padiglione D" />
		<div class="title">Padiglione D</div>
	</div>
Fammi sapere se funzionano :)
 
Ultima modifica:
F

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Grazie ragazzi :) funziona alla perfezione!
Adesso però ho un altro problema.. Se clicco su un padiglione e chiudo il fancybox
il mousehover non funziona più come prima..

Cosa devo fare?
Ho caricato qui un esempio: http://fabiotoscano.it/Fiera.htm

HTML: 
<script type="text/javascript">
$(function() {

$(".pad").hover(function() {
$(this).children(".title").show(); //visualizza titolo padiglione
});

$(".pad").click(function() {

	$(this).children(".title").hide(); //scompare il titolo

	$(this).children(".descr").show(function() { //visualizzo la descrizione stile fancybox
	$(".pad").hover(function() { 
		$(this).children(".title").hide(); //disabilito il mousehover
	}); //click
	
		$(".close").click(function(event) {
			$(".descr").hide();
			event.stopPropagation();
			
			$(".pad").hover(function() {
				$(this).children(".title").show(); //visualizza titolo padiglione
			});
		});//click
	
	});//show
	
	});//fine clcik

$(".pad").mouseout(function() {
$(this).children(".title").hide();

});
});//fine jquery
</script>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
I Form con selettore HTML e CSS 0
F Selettore di immagine Javascript 4
P Filtro selettore e variabile jQuery 2
ivarello Selettore che compila in automatico un INPUT Javascript 12
N selettore immagini Javascript 1
L Form Ordine (Selettore Quantità) Javascript 11

Discussioni simili

Alto Basso