|
HTML - Problem With Rollover Navigation
Hey guys, I'm a designer trying to code my website which is problem number 1. I'm trying to crreate these solid rollover states for my graphic headers on my nav (about and contact). I found a site that I plugged code from using javascript which i dont' know. The "about" link works fine but the "contact" link effects teh about link instead of targeting itself. Any help you can offer I would really appreciate. Thanks!
here's my site: http://www.bru.us.com here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="images/nav_header_design.gif"/><br> <a href="about.html"class="catlink">TowerGroup</a><br> <a href="about.html"class="catlink">PSR</a><br> <a href="about.html"class="catlink">Click&Buy</a><br> <a href="about.html"class="catlink">MCA</a><br> <a href="about.html"class="catlink">Incretin Forum</a><br> <a href="about.html"class="catlink">Mastercard</a><br> <a href="about.html"class="catlink">Baraclude</a><br> <a href="about.html"class="catlink">IconNicholson</a><br> <a href="about.html"class="catlink">FIFA</a><br> <br> <br> <IMG SRC="images/nav_header_other.gif"/><br> <a href="india_photos.html"class="catlink">India</a><br> <br> <br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br><br> <a href="mca.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(0)" onMouseOut="out(0)"></a><br> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> Similar TutorialsHello everyone! I'm diving head first into XHTML/CSS development. Up until this point I've been designing using only tables, background graphics, and PHP. I have seen the light so I'm now working with XHTML and am proud to say that what I've done so far is XHTML Strict valid! I took a look at phpbb.com's website and saw I really liked the layout and figured, what better practice than to create something like that, so I did! Unfortunatly I'm having trouble duplicating their method for the navbar. If anyone could point me in the direction of how to get the images all in the nav bar's div layer I'd be very thankful. Keep in mind it will need to be rollover/active/rollout classes capable. My website is http://xt-arts.com Thanks so much for your help!! I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another... The code for the rollover itself is: Code: <a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>
The bad javascript for the image swap is: Code: <script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
And finally the even worse coding for the sound is: Code: <SCRIPT LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>
I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve. Thank you for your time. hey not too sure if I am overlooking something but i have my rollover buttons set up fine and they are working but whenever I click on them(my browser is google chrome), they produce a black rectangle just underneath, they also jump a bit when clicked. the site page is www.spaseafoods.com/Untitled-1.html and you will see the link buttons there, here is the code for the buttons; <a href="Untitled-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/cooltext446156370MouseOver.png',1)"><img src="/cooltext446156370.png" name="Image7" width="87" height="39" border="0" id="Image7" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/cooltext446156370.png',1)"></a> Hello Folks, I have created a graphic using photoshop CS2 that will form the basis of a webpage. I am a little stuck as to how to include rollover buttons. This is the graphic as it is at the moment: http://magicalwonders.com/colingreen/ With my first attempt at using a background graphic for a website I was able to use a repeating tile in the left hand side bar, and insert basic image buttons for navigation. This time though the situation is a little different, as I am not using a solid colour in the side bar, in favour of a graduated colour image. I have yet to slice the graphic, and will create a slice towards the bottom of the graphic that can be used to repeat - so that any overflow text doesn't break the design. What I'm not sure about is, if the main background image for the side bar, and the repeat background tile can occupy the same cell, both as background images? If they can, then adding rollover buttons should not be a problem. If they can, I'm not sure what the code would look like to handle that. If they can't, I'm wondering what other method can be used to include Rollover navigation buttons. I'd be grateful if someone can advise. Many thanks, Myles The website I am working on is he http://radarcartoons.com/test/test.html I want each of those "blips" to change to the other pictures I have of them lit when you rollover it, but I can't figure out how to do a rollover script for multiple images on one page. The names of my alternate files are the same as the regular ones, except they have an _lit.jpg after them. So if it's 2.jpg, then the lit one would be 2_lit.jpg. I will also of course want to make them links to pages which i still have to make, but maybe the code just to make them links and an example link could show me how to get it working. Thanks a lot to anyone who can help me out on my big request! I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? I'm about to rip my hair out on this one. I'm using Dreamweaver 8. I have navigation that is using image rollovers to swap. My images that are needed for the rollover to work are in my "assets" folder in the "root" directory. However, when I create the actual html page off the template it is looking for the image in "templates/assets" and therefore does not find the image to swap. I have a number of different navigation buttons and I inserted them all the exact same way. This is the only one that is having this issue, the rest work properly. This is the code that resides on the templates page. Code: <p class="navimage">
<a href="../logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set','','..assets/menu/log_over.jpg'',1)"><img src="../assets/menu/log_default.jpg" alt="Log & Grate Set" name="Log & Grate Set" width="158" height="34" border="0" id="Log & Grate Set" /></a></p>
Notice the Set','','..assets/menu/log_over.jpg. This is the code that is produced when you create an html page from the template. Code:
<a href="logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set',Templates/'','..assets/menu/log_over.jpg'',1
For some reason it is adding the directory templates, and therefore does not find the image. Does anyone know how I can fix this? Thanks, braves07 I made a Custom BG for my navigation.. It possible to have a html/CSS code to add this BG under my navigation.. and have the links overlay on the BG? Thanx In Advance!!!! basicly my site works find on firefox, works fine on the most up to date internet explorer, but on internet explorer 5 or 6 it messes up abit! i cant find the problem www.boldsac.co.uk thats the link. if anyone knows why its doin this could you help me out please Hello, I am trying to figure out why I am having a problem with a drop-menu in Internet Explorer 6. The site I am currently working on is at http://www.falcolombardi.net/Saint%20Anne/. It appears fine in FireFox, but I am needing it to work in Internet Explorer as well. There is only one element that is needing to drop, and that's a 'Newsletter' option under the "Perish Life" link. Any help is greatly appreciated! Hi guys, www.ivoog.com - I am having a problem with IE 6 on the navigation menu. Open it up in IE 6 and mouseover the different buttons (scooters, miniscooters, bikes, atvs, accessories, etc). See how it kind of gets "messed up" when you mouseout? What is the problem? Is it a simple solution? Here's my CSS: http://www.pics.ivoog.com/top/navigation.css javascript: http://www.pics.ivoog.com/top/navi.js If it's a fairly simple solution what do I need to change? Thanks! My web site www.wayneactorscommunitytheatre.org is having a problem with the navigation on some computers. Dong a mouse over on the header brings up a drop down list for navigation. Doing a mouse over these brings up others. On some computers this doesn't work and users are unable to connect to the lists that come up. It works great on a couple of system I have but two users have complained to me that on their XP internet Explorer it doesn't work. Anyone have any suggestion to how I can fix this? The xtml and css pages verify and I am at a loss as to what the problem is. Okay, so I have a small issue here. I started a webcomic, and I'm now redesigning the website. I'm using SSI includes on my pages, and I'm having an issue with my navigation. I want to be able to include first comic/previous comic/next comic/current comic buttons, but the problem is this: with the previous comic/next comic buttons, I'm not really sure how to code it. I can't type in the name of the page I want it to go to, because then it'll be the same on every page. Is there a way around this? I figured I could tell it to go "next" and have it refer to "next" somewhere on the individual pages, which would send it to the next comic in the sequence, but I can't find the coding to do that, and I can't figure out the right way to word it to find it in a search. If I'm not too vague, can you guys help me out here? Thanks! Hello Folks, I'm currently redesigning my site and am having a problem with the last bit! I know that CSS is the method of choice now for web design but I need to integrate my site with a commercial shopping cart called Actinic. This uses tables and is virtually impossible to rewrite using CSS. It makes for a seamless integration if I stick with tables for my part of the site, and less headaches trying to make the two sites look the same. I want to move some of the links away from the left hand column on the page and put them into a horizontal bar at the bottom. I've created a tile which repeats, but I want it separated a bit from the left hand column. Here's a url so you can see what I'm on about. http://www.magicalwonders.com/NewLook/Index.html You will see that the blue bar created by my tile is stuck to the side of the left hand column. My problem arises in trying to move this bar to the right of the left hand column, so that there is a gap between the two. I was hoping to avoid using a full size graphic as I want to keep the file size to a minimum. I've tried Cell Spacing & Padding which doesn't have any effect, so I've tried putting the background tile in between Div tags and specifying a width using the following code:- <td align="center" ><Div width=300px id="footerbackground">Some links go Here</Div></td> This hasn't worked though and the tile fills up the entire width of the cell that the Div is in. I would be grateful if anybody can offer any advice. Many thanks, Myles Hi, I'm Sam. New to the forum and looking for some advice!! Ok, I have - after many failed attempts - worked out how to do text to text rollovers (ie: I highlight the word Molly anda pops up appears with "Da doggy!" what I would really like to do, but I'm not sure of I can in blogger, is have the underlined word pop up an image when the mouse is rolled over. Is this possible? Any help would mean you would be worshipped forever (or at least until I have got used to doing it and it becomes second nature - hee hee!!) Hi, if anyone would be able to help me with this issue im having doing an image rollover it would be great. Thank you Hi, I'm trying to have my text link to shift to the right about a pixel or 2 when I roll over it, any help would be greatly appreciated. Tom. Is there a way to code a thumbnail so that onMouseover a larger version opens in a separate window and onMouseout the window automatically closes? I'm developing a web form for ordering display panels and there will be several catagories for the user to choose from each containing multiple selections. Something like this would aid the user by not forcing them to constantly close windows while making their choices. I have already posted rollover threads, and my problem was solved. However, as I was building my online website, I realised that an end-user has to wait for music files to buffer and load before the sound actually plays. Basically, my rollover is this: Code: <TD ROWSPAN="1" COLSPAN="1" WIDTH="156" HEIGHT="156"> <a href="javascript:void(0);" onMouseOut="MM_swapImgRestore();stopSound(0);" onMouseOver="MM_swapImage('Image9','','musicplaying.gif',1);playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a></TD>
- This plays music and an animation when a mouse is hovered over the original picture. My problem: when the mouse is hovered over the image, it takes about 30 seconds for the music to start playing as it is loading. To solve this, I want a line of text to appear when the mouse hovers over the image which lasts about 30 seconds, saying: "Please wait as music buffers." I have a line of code in mind: [code]<p class="time" begin="10" dur="5">text</p>[code] I also have all of the necessary coding to activate this code at the top of my page. But my question is: how do I put the timed writing, into the mouseover code? Any suggestions would be greatly appreciated. |
|||||||