|
HTML - Image Menu Hover
So i am startet at a webpage and wanted a cool menu to it and found one but i cant find any tutorials on how to make it the menu look like this:
As U can see the "HOME" bottom is longer because of the hover effect and that what i want to hear how that i can make that... all the tuts i have found is where the images is the same size, but when i try that its not working... Plzz help me fast Similar TutorialsI want to have a menu at the top of the screen and then when you mouse over a section a drop down menu appears with links. EDIT: how can I position the menu so it's at a specific part of the screen? Ok, well I got it working perfectly on Firefox 2... I checked it on IE and the second drop down list is way off track... I put in the javascript hack given in the tutorial... but I had to tweak the code they gave a bit... basically to work with my layout. http://www.htmldog.com/articles/suckerfish/dropdowns/ Any advice on how to fix any cross browser difficulties would be great, thanks! http://www.runescapeemporium.com/newlayout Hello All. I have been attempting a hover-scrolling menu display for my online art portfolio, however I seem to be unable to 1) put the hover-scrolling menu display into a tab-panel 2) have a second scrolling menu display with different content, underneath the first one, which works separately (at the moment they scroll together when either one of them has the mouse-hovering on) Here are my codes = ---------------------------------------------------------------- Code: body {
}
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 280px;
width: 500px;
overflow: auto;
}
ul.sc_menu {
display: block;
height: 230px;
/* max width here, for users without javascript */
width: 4915px;
padding: 15px 0 0 15px;
/* removing default styling */
margin: 0;
background: url('navigation.png');
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
display: none;
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
/* Here are styles for the back button, don't look at them */
#back {
display: block;
width: 500px;
text-align: center;
color: #003469;
font-size: 16px;
}
</style>
<script type= "text/javascript">/*<![CDATA[*/
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
/*]]>*/</script>
</head>
<body>
<div class="sc_menu">
<ul class="sc_menu">
<li><a href="javascript:popitup('attachments/Image/art1-large.jpg')"><img src="attachments/Image/art1.jpg" alt=""/><span>IMAGE 1</span></a></li>
<li><a href="#"><img src="attachments/Image/art2.jpg" alt=""/><span>IMAGE 2</span></a></li>
<li><a href="#"><img src="attachments/Image/art3.jpg" alt=""/><span>IMAGE 3</span></a></li>
</ul>
</div>
</body>
</html>
Code: <HTML>
<HEAD>
<TITLE>Java Popup Window Example</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!-- ;
var newwindow = ''
function popitup(url) {
if (newwindow.location && !newwindow.closed) {
newwindow.location.href = url;
newwindow.focus(); }
else {
newwindow=window.open(url,'htmlname','width=404,height=316,resizable=1');}
}
function tidy() {
if (newwindow.location && !newwindow.closed) {
newwindow.close(); }
}
---------------------------------------------------------------------- Code: <div class="tab-pane" id="tabPane1"> <script type="text/javascript"> tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) ); //tp1.setClassNameTag( "dynamic-tab-pane-control-luna" ); //alert( 0 ) </script> <div class="tab-page" id="tabPage1"> <h2 class="tab">TERM ONE</h2> <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script> <<<attempt to insert scroll-menu 1 >>> <<<attempt to insert scroll-menu 2 >>> </div> <div class="tab-page" id="tabPage2"> <h2 class="tab">TERM TWO</h2> <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage2" ) );</script> <<<attempt to insert scroll-menu here>>> </div> </div> <script type="text/javascript"> //<![CDATA[ setupAllTabs(); //]]> </script> </body> </html> ------------------------------------------------------------ Any suggestions or tips would be very much appreciated Hi Guys, I'm creating a small music website with some songs / lyrics for guitar etc. Is it possible to have some text (eg- a guitar chord like C) and when you hover your mouse over the text, it displays a small image of the chord ? Any help would be greatly appreciated, Thanks, Emma how do I add this: http://qrayg.com/learn/code/qtip/ to this page: http://www.paulodourado.com to get something similar to this page: http://www.jorycordy.com i have no idea where to "plug things in" im extremely new to this, thank you in advance How can I get rid of the jumping of page when I hover over the "I'm stopping global..." image here http://ranabtawi.com/index.htm Thanks I'm not sure if this has been covered somewhere, but I couldn't find it. I'm wondering if there's any way to get an image to pop up on a hover over text, not a link. If that's not specific enough, I have a page of staff members. I want to be able to move my mouse over the person's name and have a picture of them pop up. Is this possible? hi, can anyone help me i need a small pop up window to open when i hover over an image. sort of like on this site but with a bigger image http://www.cssplay.co.uk/menu/mapper.html the code for the images that i wish to use this on is, Code: <tr> <td> <div class="content"> <center> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <br /> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb_hover.jpg" alt="" /></A><border="0"> <A href="http://gamesection.bravehost.com/roster.htm" title=""><img src="./images/thumb.jpg" alt="" /></A><border="0"> </center> </div> </td> </tr> the site is www.gamesection.bravehost.com cheers. I don't know alot about HTML. I just need a simple HTML Rollover/Hover code I can pop my image URLs into and it will work. Help? I'm using Freewebs, btw. hi there. i made a website for somebody years ago when i knew nothing about html. the code is absolutely crazily bad and i am looking to revamp it. the site is www.englishandproudofit.co.uk i know how to do the layout but its the buttons i am struggling with. what is the best way to make the buttons around the outside? i only want to use one image for all of the buttons and then have text on each button that also chnages colour on hover, pretty much how it is now but what would be the correct way to do it? all help greatly appreciated. thank you, sam I'm hoping for some help with the code to solve my problem. My site has a page devoted to a series of products. I have the names of the products running down a set of cells on the left side of a table. The product names will be linked to html pages dedicated to each of those products. I've got that under control, no problem. I'm trying to add the extra spiff of a common image area in a large merged cell just the to the right of the navigation cells and I'd like for an image of the specific product to come up in the image area when a user mouses-over the navigation cell. For example, the first nav cell is for "Lathes," so when a user mouses over the word Lathes I want a picture of a lathe to appear in the image area. When they mouse over the nav for bandsaws, I want an image of a bandsaw to come up in the same image area, etc. Is anyone willing to suggest some code to accomplish this little trick? It would be a great help. Thanks. Hi, i didnt know where to put this because I've got a problem with the CSS too. All the tutorials ive seen on the net require a "ordered/unordered list" to make a css menu. my site is a lot of images put together using divs, and then each relevant part included in a php file called index.php now i would like to have a menu button changed with a button with a tick on it when clicked to show the active state. here is my html with all the images put in order, the four menu button are in there home, events, donations, bhajans HTML Code: <!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>
<link rel="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:#FFFFFF;">
<div id="container">
<div id="sideLeft_">
<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
</div>
<div id="krishna_">
<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
</div>
<div id="logo_">
<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
</div>
<div id="hanuman_">
<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
</div>
<div id="sideRight_">
<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
</div>
<div id="ysg-06_">
<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
</div>
<div id="saiBaba_">
<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
</div>
<div id="home1">
<a href="index.php"><img class="current-home" id="home1" src="images/home_off.gif" alt="Home"/> </a>
</div>
<div id="om_">
<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
</div>
<div id="ysg-10_">
<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
</div>
<div id="donations_">
<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
</div>
<div id="ysg-12_">
<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
</div>
<div id="events1">
<a href="events.php"><img id="events1" src="images/events_off.gif" width="151" height="22" alt="Events" /> </a>
</div>
<div id="bhajans_">
<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
</div>
<div id="ysg-15_">
<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-16_">
<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-17_">
<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
</div>
<div id="ysg-20_">
<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
</div>
<div id="lineLeft_">
<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
</div>
<div id="lineRight_">
<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
</div>
</body>
</html>
this is my css Code: #container {
position: relative;
text-align: center;
width: 1068px;
height: 0px;
margin: 0px auto;
}
#sideLeft_ {
position:absolute;
left:0px;
top:0px;
width:79px;
height:768px;
}
#krishna_ {
position:absolute;
left:79px;
top:0px;
width:155px;
height:227px;
}
#logo_ {
position:absolute;
left:234px;
top:0px;
width:597px;
height:138px;
}
#hanuman_ {
position:absolute;
left:831px;
top:0px;
width:175px;
height:227px;
}
#sideRight_ {
position:absolute;
left:1006px;
top:0px;
width:79px;
height:768px;
}
#ysg-06_ {
position:absolute;
left:1085px;
top:0px;
width:1px;
height:768px;
}
#saiBaba_ {
position:absolute;
left:234px;
top:138px;
width:78px;
height:89px;
}
#home1 a:active, .current-home {
position:absolute;
left:312px;
top:138px;
width:151px;
height:25px;
background-position: top;
background:url(home_on.gif);
}
#events1 a {
position:absolute;
left:312px;
top:163px;
width:151px;
height:22px;
background-position: top;
}
#om_ {
position:absolute;
left:463px;
top:138px;
width:131px;
height:76px;
}
#ysg-10_ {
position:absolute;
left:594px;
top:138px;
width:1px;
height:76px;
}
#donations_ {
position:absolute;
left:595px;
top:138px;
width:151px;
height:25px;
}
#ysg-12_ {
position:absolute;
left:746px;
top:138px;
width:85px;
height:89px;
}
#bhajans_ {
position:absolute;
left:595px;
top:163px;
width:151px;
height:22px;
}
#ysg-15_ {
position:absolute;
left:312px;
top:185px;
width:151px;
height:29px;
}
#ysg-16_ {
position:absolute;
left:595px;
top:185px;
width:151px;
height:29px;
}
#ysg-17_ {
position:absolute;
left:312px;
top:214px;
width:6px;
height:13px;
}
#aboutus_ {
position:absolute;
left:318px;
top:214px;
width:211px;
height:24px;
}
#resposibilities_ {
position:absolute;
left:529px;
top:214px;
width:211px;
height:24px;
}
#ysg-20_ {
position:absolute;
left:740px;
top:214px;
width:6px;
height:13px;
}
#lineLeft_ {
position:absolute;
left:79px;
top:227px;
width:239px;
height:5px;
}
#lineRight_ {
position:absolute;
left:740px;
top:227px;
width:266px;
height:5px;
}
#logIn_ {
position:absolute;
left:79px;
top:232px;
width:111px;
height:33px;
}
#register_ {
position:absolute;
left:190px;
top:232px;
width:112px;
height:33px;
}
#ysg-25_ {
position:absolute;
left:302px;
top:232px;
width:16px;
height:27px;
}
#ysg-26_ {
position:absolute;
left:740px;
top:232px;
width:266px;
height:49px;
}
#ysg-27_ {
position:absolute;
left:318px;
top:238px;
width:422px;
height:21px;
}
#ysg-28_ {
position:absolute;
left:302px;
top:259px;
width:10px;
height:22px;
}
#sayings_ {
position:absolute;
left:312px;
top:259px;
width:76px;
height:22px;
}
#ysg-30_ {
position:absolute;
left:388px;
top:259px;
width:352px;
height:22px;
}
#ysg-31_ {
position:absolute;
left:79px;
top:265px;
width:48px;
height:16px;
}
#memberBenefits_ {
position:absolute;
left:127px;
top:265px;
width:114px;
height:11px;
}
#ysg-33_ {
position:absolute;
left:241px;
top:265px;
width:61px;
height:16px;
}
#ysg-34_ {
position:absolute;
left:127px;
top:276px;
width:114px;
height:5px;
}
#content_ {
position:absolute;
left:79px;
top:281px;
width:927px;
height:487px;
}
a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
img{
border:0px;
}
and this is the main php file with the includes. PHP Code: <?php include 'headerplusmenu.php'; ?> <?php include 'login.php'; ?> <?php include 'sayings.php'; ?> <?php include 'main.php'; ?> <?php include 'homesubmenu.php'; ?> <div id="content_"> <p>Homepage</p></div> How to make a image rollover based menu that changes image on mouse rollover and on mouse click so when I click the image it stays changed until I click on another image in the menu. I am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hello, I'm new to this forum, so first, hello! Actually, I'm new to web design in general but have taken on the role at the church I work at because our old site was a mess. I downloaded some nice looking templates and have been using them as a foundation. The site is www.miamibc.com. If you go there and look at the header menu (home, about us, etc), I want to consolidate that menu some and add a drop down menu with more choices. Is there a way I can do this while keeping it looking the way it does now? If you need any more info from me, let me know. Thanks for your help! Ben Hi All Below works in Firefox, Safari but not IE6 - Is it possible (We can't upgrade to 7 or above ) Is there any thing I can do ? <head> <style type="text/css"> <!-- .showdata, .showdata ul {padding: 1; margin: 0; list-style:none;} .showdata a {display: inline-table; width: auto px;} .showdata li {float: left; padding: 1px 8px 2px 0px;} .showdata li ul {position: absolute; background: #FFF399; padding: 1px 1px 1px 4px; width: auto px; left: -9999px;} .showdata li:hover ul {left:auto; } .red {color: #ff0000;background-color:#6495ed; align=right} .blue {color: #6495ed;background-color:#c50020; align=right} --> </style> </head> <html> <body> <ul class="showdata"> <li><a href="#">jimmy Smith</a> <ul> <div> <li><a ><table> <tr class="showdata"> <td style="color:red" align=right>country: </td> <td style="color:blue">UK</td> </tr> <tr> <td style="color:red" align=right>Area: </td> <td style="color:blue">England</td> </tr> </table></a></li> </ul> </li> </ul> </td> </tr> </table></div> </body> </html> I've made a small icon that I want to show on the left side of each link in my menu when the arrow is over it. Haha, hard to explain In my menu, I dont want the icon on the left side of the links to be visible until the arrow is over the link. What do I do? Put the image tag in front of every link, and use the a: hover (in the stylesheet) to decide when I can see the icon? Is this even possible? It is the same icon that should be shown next to every link. Hello, I am a pretty good coder, But I'm stuck on something I have never tried before.. When I hover the div the text doesn't display (Using display:none unhovered, display:block onhover) The code is below. HTML Code: div.container > div.text {
padding: 5px;
width: 300px;
height: 100%;
display: none;
}
div.container > div.text:hover {
display: block;
}
<div class="container">
<div class="text">
</div>
</div>
When I don't use "display" the text displays but it goes over the width I want it too here is the code alittle like this ... (my bad ascii art) Code: ---------- | xxxxxxxx|xxxxxxx | | ---------- Does anyone have an idea how I could fix this? If I didn't explain clearly I'm sorry its nearly 3am... -Daniel Hey all. I'm not exactly sure how to explain what I want. lol. I've seen it on sites before, but can't think of a particular site to point to. But I can explain! On some sites, you might be reading an article or something, and there is a word that is underlined and turned into a link i.e. I'll be reading an article about animals, and the word "gorilla" will be a link and when you hover over it, it will either show you a definition, or point you to a wikipedia article of "gorilla." Does anybody know what I'm talking about? I really want to implement this into a forum of mine that will point members to, if nothing else, a definition of what a commonly used word is. Any clues? thanks! Hello, I have this simple slideshow as can be seen here. It currently contains 2 images. Works good in all browsers except IE9.. as soon as I move my mouse-cursor near it, it freezes! Hope someone can locate the conflicting issue(s), thanks. ps - tested in IE 7, IE 8 and IE 9.. only 9 fails. |
|||||||