|
HTML - Inserting Rollover Buttons Problem
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 Similar Tutorialshere is the css: #button { display: block; width: 109px; height: 89px; background-image: url(Images/button.png); background-repeat: no-repeat; } #button:hover { background-image: url(Images/buttonHOVER.png) } here is the html: <a id="button"> <!-- if there is a link then place a HREF next to the ID --> also if you want to preload the images then put this in the html: <img src="button.png" height="89" width="109" class="hiddenPic"> <img src="buttonHOVER.png" height="89" width="109" class="hiddenPic"> and this in the head: (only put this in your head if you are pre loading the images) <style type="text/css"> .hiddenPic {display:none;} </style> Hi there all. I put a site together about 3 months ago and all was running fine. I had some rollover buttons which played a small MP3 when rolled over. Now the site either asks you to download the sounds of asks to load media player rather than just playing them. If you widh to have a look and offer any advice the site is www.nozzart.com. I haven't changed any code and was wondering if it is to do with the browser more than the code ? Hope you can help and thanks in advance Chris Jesse bjr 2 created a site ac XHTML / CSS Oh sorry, here is no Sms :p Hello =) I try to create a site with XHTML / CSS, for now, I'm doing pretty good! No luck, to insert the banner hangs her: / I insert this code: Citation Code: <Div id = "<img src="images/hawai.jpg" alt="Photo Hawaii" /> <! - Here we put the banner -> </ Div> <div id="menu"> <! - Here we will put the menu -> </ Div> <div id="corps"> <! - Here we put the main content of the page (all text what) -> </ Div> <div id="pied_de_page"> <! - Finally, we will down the page the name of the author, copyright ... -> </ Div> (Example teo21 @ m) But nothing happens! So, hoping you can help me: / Regards! 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!! 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> 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> 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 When i go to the home page, the "Dashboard & Follow" buttons appears, but when i go to a specefic ID post, i don't see the button "Reblog nor Like" it's empty, on the top on the right, there is nothing, how can i fixt that ? it's seems it's independant from tumblr, but with my theme, it doesn't work ! www.liberemoi.tumblr.com can anyone help me on this ? if anyone need the code of my theme....Anything !! 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. on my 'past layouts' section i did a rollover image for each one but the hand cursor shows when you move the mouse over the image, how do i do it so it's just changes pics without changing cursors? Hey - I'm in the middle of making a website for our family villa, and was wanting to put on a picture of the floor plan. I thought it'd be a good idea if when you mouse over a room, a big picture of the room shows up - kind of like an image map, only you wouldn't on the room, and the photo would show up over the floor plan (if that makes sense!) Can anyone tell me how to do this please? Thanks!! I know how to do a rollover evect with js but I was wondering if it is possible to do with css. Thanks for any help you can give me! Hello. Please could you look at this code for me and tell me what I have done wrong? I can't get it to change the picture on rollover. Thank you Code: <div style="background-color:#ff0099;
height:25px;width:956px;float:left;"">
<a href="http://www.google.co.uk"
ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4145/4983786279_f55ce0b9bb_m.jpg"'
ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4145/4983658949_91e6ffdc21_m.jpg"'>
<img src="http://farm5.static.flickr.com/4145/4983658949_91e6ffdc21_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk"
ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4103/4984384100_9249a58aa3_m.jpg"'
ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4149/4984257696_f1fdb7cd27_m.jpg"'>
<img src="http://farm5.static.flickr.com/4149/4984257696_f1fdb7cd27_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk"
ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4083/4984384182_ecc8cd023c_m.jpg"'
ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4112/4983659827_547410d1ed_m.jpg"' target="_blank">
<img src="http://farm5.static.flickr.com/4112/4983659827_547410d1ed_m.jpg" name="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk"
ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4144/4983786159_e7730fa193_m.jpg"'
ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4150/4983658139_5b6796a521_m.jpg"'>
<img src="http://farm5.static.flickr.com/4150/4983658139_5b6796a521_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
</div>
Hello everybody. I was wondering if you could help. Firstly I'm a noob to css/html. I've come stuck. I've created a site in illustrator imported into dreamweaver (I know this isn't the right way but it's easier for me at the moment, sort of) and added lightbox 2 to it. It's been smooth sailing and lightbox works great. This is the code I see: (note I've just put the code for the image I want to use) <div align="center"><a href="images/locogsequins copy.jpg"rel="lightbox"><img src="images/index_03.jpg" width="262" height="188" Messy I know , but it's working for me so far. However, on top of having the lightbox effect I would like to add a rollover effect. So when a viewer lands on the page they will see everything in black and white, when they roll over an image it turns to colour. The code I've found is <div><img src="images/locogsequins_bw.jpg" onmouseover="this.src='images/locogsequins copy.jpg'" onmouseout="this.src='images/locogsequins_bw.jpg'"> which works. (I've tested via preview in DW) My question is where do I insert this into the earlier code so they work together? I'd very grateful for any help. Thanks x 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. I have a menu bar where i place the script for RollOver Background. But when i upload it, second background doen't load untill i place the cursor on tab. Even After placing the cursor it takes around 10 second to load. Note: this problem is not at locally. As i upload it then it comes. Even i have place the "onLoad" in body tag. Code is below: <table width="685" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="96" height="29" align="center" background="images/tab_a_01.jpg" onmouseover="this.style.background='url(images/tab_a_02.jpg)'" onmouseout="this.style.background='url(images/tab_a_01.jpg)'" valign="absmiddle" style="background-repeat"><div style="margin-top:10px"><a href="#" class="tab"><b>Home</b></a></div></td> <td width="10"> </td> <td width="96" height="29" align="center" background="images/tab_a_01.jpg" onmouseover="this.style.background='url(images/tab_a_02.jpg)'" onmouseout="this.style.background='url(images/tab_a_01.jpg)'" valign="absmiddle" style="background-repeat"><div style="margin-top:10px"><a href="#" class="tab"><b>Join Today</b></a></div></td> <td width="10"> </td> <td width="155"> </td> <td width="10"> </td> <td width="96"> </td> <td width="10"> </td> <td width="96"> </td> <td width="10"> </td> <td width="96"> </td> </tr> </table> 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!!) |
|||||||