3 replies [Last post]
indy_jones
indy_jones's picture
Offline
Regular
USA
Last seen: 17 years 23 weeks ago
USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 11
Points: 0

I need some help getting this concept working. If you go to nova-dataonline.com/test.htm you can see what I am working on. This is the frontpage for an online store and the manufacturers on the left side of the center content are my featured manufactures.

If you hover over the logos, a colored box displays in the center of the screen. Those boxes will eventually be graphics of the featured product that corresponds to the hovered manufacturer. However, I want to be able to have these boxes stay displayed on the screen even if the mouse leaves the logo because there will be information within the div that will contain hyperlinks.

here is the relevant javascript:

<script language="javascript" type="text/javascript">
<!--
function toggleDiv(id,flag) 
{
	if (flag == "1")
	{
		if (document.layers) document.layers[''+id+''].visibility = "show"
		else if (document.all) document.all[''+id+''].style.visibility = "visible"
		else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
	}
	
	if (flag == "0")
	{
		if (document.layers) document.layers[''+id+''].visibility = "hide"
		else if (document.all) document.all[''+id+''].style.visibility = "hidden"
		else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
	}
}
//-->
</script>

markup:

<div id="welcome"></div>
	
<div class="man_box" id="m_box1" onmouseover="toggleDiv('feat_1',1)"
    onmouseout="toggleDiv('feat_1',0)"></div> 
<div class="man_box" id="m_box2" onmouseover="toggleDiv('feat_2',1)" 
    onmouseout="toggleDiv('feat_2',0)"></div>
<div class="man_box" id="m_box3" onmouseover="toggleDiv('feat_3',1)" 
    onmouseout="toggleDiv('feat_3',0)"></div>
<div class="man_box" id="m_box4" onmouseover="toggleDiv('feat_4',1)" 
    onmouseout="toggleDiv('feat_4',0)"></div>
<div class="man_box" id="m_box5" onmouseover="toggleDiv('feat_5',1)" 
    onmouseout="toggleDiv('feat_5',0)"></div>

<div class="featured" id="feat_1"></div>
<div class="featured" id="feat_2"></div>
<div class="featured" id="feat_3"></div>
<div class="featured" id="feat_4"></div>
<div class="featured" id="feat_5"></div>

and CSS:

/*====================MANUFACTURERS======================*/
.man_box{
 width:150px;
 height:50px;
 position:absolute;
 left:190px;
 background-position:center;
 display:block;
}

#m_box1{
 background-image:url(http://www.nova-dataonline.com/images/man_logos/cisco.gif);
 background-repeat:no-repeat;
 top:300px;
}

#m_box2{
 background-image:url(http://www.nova-dataonline.com/images/man_logos/sonicwall.gif);
 background-repeat:no-repeat;
 top:370px;
}

#m_box3{
 background-image:url(http://www.nova-dataonline.com/images/man_logos/linksys.gif);
 background-repeat:no-repeat;
 top:440px;
}

#m_box4{
 background-image:url(http://www.nova-dataonline.com/images/man_logos/adtran.gif);
 background-repeat:no-repeat;
 top:510px;
}

#m_box5{
 background-image:url(http://www.nova-dataonline.com/images/man_logos/netgear.gif);
 background-repeat:no-repeat;
 top:580px;
}

/*=======================FEATURED========================*/
.featured{
 visibility:hidden;
 width:410px;
 height:330px;
 position:absolute;
 top:300px;
 left:340px;
}

#feat_1{ 
 background-image:url(http://www.nova-dataonline.com/images/message/test1.jpg);
 background-repeat:no-repeat;
 background-position:right;
}

#feat_2{
 background-image:url(http://www.nova-dataonline.com/images/message/test2.jpg);
 background-repeat:no-repeat;
 background-position:right;
}

#feat_3{
 background-image:url(http://www.nova-dataonline.com/images/message/test3.jpg);
 background-repeat:no-repeat;
 background-position:right;
}

#feat_4{
 background-image:url(http://www.nova-dataonline.com/images/message/test4.jpg);
 background-repeat:no-repeat;
 background-position:right;
}

#feat_5{
 background-image:url(http://www.nova-dataonline.com/images/message/test5.jpg);
 background-repeat:no-repeat;
 background-position:right;
}

If this can be done with CSS I will be extremely happy. I cannot remove the "onmouseout" from the HTML because that will prevent the image from toggling when I mouseover the next manufacturer. Being kind of new at this and teaching myself as I go, any help would be greatly appreciated.

seb
Offline
Enthusiast
Last seen: 15 years 15 hours ago
Joined: 2003-09-20
Posts: 208
Points: 0

help with featured products menu

No, can't be done with CSS. Just use what you have but remove the onmouseout calls?

indy_jones
indy_jones's picture
Offline
Regular
USA
Last seen: 17 years 23 weeks ago
USA
Timezone: GMT-5
Joined: 2004-08-16
Posts: 11
Points: 0

help with featured products menu

yeah, I tried that but it keeps the featured products from changing. Thanks for the help, though but I think I may have found a solution to my own problem.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 2 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

help with featured products menu

May not be what you want but have a look at Stu Nicholls site there is an example of using pure CSS to create a photo gallery with a larger version of the thumbnail made visable when hovered and fixed when clicked; very simple, very clever.

http://www.stunicholls.myby.co.uk/menu/scroll_gallery.html#

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me