Mouseover and mouseout

Question

trance girl 0 Newbie Poster

14 Years Ago

Hi,

I have a question regarding Jquery :). I'm just a beginner and I don't know much that's why I need your help.

I have a main menu that is drop down menu with images. But that other list must be separated. Why? Cause I'm working with Kentico CMS (ASP.NET) and I have to change control if I want to display my MM this way. This is easier :).

So... put now CMS aside and let do this in plain HTML.

Code that I have is :

<body>
<ul id="MM">
    <li><a href="#" id="mm1" class="mm">First link</a></li>
        <li><a href="#" id="mm2" class="mm">Second link</a></li>
    <li><a href="#" id="mm3" class="mm">Third link</a></li>
    <li><a href="#" id="mm4" class="mm">Fourth link</a></li>
    <li><a href="#" id="mm5" class="mm">Fifth link</a></li>
</ul>
<div>
    <ul id="images">
        <li class="hidden" id="mm1Show"><img src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></li>
        <li class="hidden" id="mm2Show"><img src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></li>
        <li class="hidden" id="mm3Show"><img src="http://www.punemobile.com/wallpapers/d/563-4/Forces+of+Nature+Wallpaper" alt="" /></li>
        <li class="hidden" id="mm4Show"><img src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></li>
        <li class="hidden" id="mm5Show"><img src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></li>
    </ul>
</div>

</body>

Now... on mouse over the first link the first image should be displayed. And so on.

The best I can do with Jquery is:

<script type="text/javascript">
$(document).ready(function(){
$('.hidden').hide(); 


$('#mm1').mouseover(function() {
       $('#mm1Show').toggle("slow");
       return false;
});
$('#mm1').mouseout(function() {
       $('#mm1Show').toggle("slow");
       return false;
});



$('#mm2').mouseover(function() {
      $('#mm2Show').slideDown();
      return false;
});
$('#mm2').mouseout(function() {
      $('#mm2Show').slideUp();
      return false;
});

});
</script>

One is with toggle and one is with slideDown/slideUp.

Is there any way I can do this (with Jquery) to avoid all this Jquery code? Cause now.. the images are humping 2 times when opening and closing the images.

Pleaaase help.

Thank you very much.

Yours TG ;)

javascript jquery

Edited 11 Years Ago by mike_2000_17 because: Fixed formatting

2 Contributors
6 Replies
120 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by trance girl

Airshow 416 WiFi Lounge Lizard

14 Years Ago

T_G,

Maybe you want something like this:

#MM {
	list-style-type: none;
}
#MM li {
	display: inline;
	position: relative;
	margin-right: 5px;
}
#MM li a {
	text-decoration: none;
}
#MM li a img {
	position:absolute;
	left: 0;
	top: 25px;
	display: none;
	width: 150px;
	border: 1px solid #000;
}

$(document).ready(function() {
	$('.hidden').hide();
	$('.mm').each(function() {
		this.imgID = "#mm_img_" + this.id.replace('mm','');
	});
	$('.mm').mouseover(function() {
		var that = this;
		$('.mm').each(function() {
			if(that !== this) { $(this.imgID).hide(); }
		});
		$(this.imgID).slideDown();
		return false;//probably not necessary
	});
	$('.mm').mouseout(function() {
		$(this.imgID).slideUp();
		return false;//probably not necessary
	});
});

<body>

<ul id="MM">
<li><a href="#" id="mm1" class="mm">First link<img id="mm_img_1" src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></a></li>
<li><a href="#" id="mm2" class="mm">Second link<img id="mm_img_2" src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></a></li>
<li><a href="#" id="mm3" class="mm">Third link<img id="mm_img_3" src="http://www.punemobile.com/wallpapers/d/563-4/Forces+of+Nature+Wallpaper" alt="" /></a></li>
<li><a href="#" id="mm4" class="mm">Fourth link<img id="mm_img_4" src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></a></li>
<li><a href="#" id="mm5" class="mm">Fifth link<img id="mm_img_5" src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></a></li>
</ul>

</body>

Airshow

Edited 14 Years Ago by Airshow because: n/a

trance girl commented: tnx for help & patience :) +1

Airshow 416 WiFi Lounge Lizard

14 Years Ago

That works just fine. I changed your code to ....

The javascript should be flexible enough to accommodate a variety of different HTML structures.

But I have another problem now. I'm working in CMS and I can't put unique ID to my menu control.

There may be a workaround. Which element(s) do you not have control over?

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

trance girl 0 Newbie Poster · Answer 1 · 2010-11-04T21:40:46+00:00

That works just fine. I changed your code to

<style type="text/css">
.MM {
	position:relative;
}
#MM {
	list-style-type: none;	
}
#MM li {
	display: inline;
	position: relative;
	margin-right: 5px;
}
#MM li a {
	text-decoration: none;
}
img {
	position:absolute;
	left: 0;
	top: 25px;
	display: none;
	width: 150px;
	border: 1px solid #000;
}
#images li {
	display:inline;
	position:relative;
	float:left;
	width:150px;
	height:150px;
}
#images img {
	display:inline;
	width:150px;
	height:150px;
}
</style>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.MainMenu img').hide();
	$('.mm').each(function() {
		this.imgID = "#mm_img_" + this.id.replace('mm','');
	});
	$('.mm').mouseover(function() {
		var that = this;
		$('.mm').each(function() {
			if(that !== this) { $(this.imgID).hide(); }
		});
		$(this.imgID).slideDown("slow");
		return false;
		
	});
	$('.mm').mouseout(function() {
		$(this.imgID).slideUp("slow");
		return false;
		
	});
});

</script>

<div class="MainMenu">

<ul id="MM">
<li><a href="#" id="mm1" class="mm">First link</a></li>
<li><a href="#" id="mm2" class="mm">Second link</a></li>
<li><a href="#" id="mm3" class="mm">Third link</a></li>
<li><a href="#" id="mm4" class="mm">Fourth link</a></li>
<li><a href="#" id="mm5" class="mm">Fifth link</a></li>
</ul>

<ul id="images">
	<li><img id="mm_img_1" src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></li>
    <li><img id="mm_img_2" src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></li>
    <li><img id="mm_img_3" src="http://www.punemobile.com/wallpapers/d/563-4/Forces+of+Nature+Wallpaper" alt="" /></li>
    <li><img id="mm_img_4" src="http://www.wallpaperscollection.net/d/24895-2/free-wallpapers-nature-887.jpg" alt="" /></li>
    <li><img id="mm_img_5" src="http://www.punemobile.com/wallpapers/d/735-4/You+are+viewing+the+Nature+wallpaper" alt="" /></li>
</ul>
</div>

:)

But I have another problem now. I'm working in CMS and I can't put unique ID to my menu control. I'll try to google it :D

Thanks Airshow

trance girl 0 Newbie Poster · Answer 2 · 2010-11-05T13:48:44+00:00

The javascript should be flexible enough to accommodate a variety of different HTML structures.

There may be a workaround. Which element(s) do you not have control over?
Airshow

I don't have a control over a tag in first 'ul' that is here:

<ul id="MM">
<li><a href="#" id="mm1" class="mm">First link</a></li>
<li><a href="#" id="mm2" class="mm">Second link</a></li>
<li><a href="#" id="mm3" class="mm">Third link</a></li>
<li><a href="#" id="mm4"class="mm">Fourth link</a></li>
<li><a href="#" id="mm5" class="mm">Fifth link</a></li>
</ul>

I'll try to find a solution for putting unique ID via Jquery

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-11-05T18:09:27+00:00

Airshow 416 WiFi Lounge Lizard

14 Years Ago

How about the <div class="MainMenu"> wrapper?

trance girl 0 Newbie Poster · Answer 4 · 2010-11-08T14:27:42+00:00

How about the <div class="MainMenu"> wrapper?

Yup, I have a control over that div.

I've solved the problem adding additional line of code

$('#MM>li>a').each(function(index){$(this).attr("id", "mm" + index);});

And changed my img id to start with id="mm_img_0" and I think that's ok now :)