|
HTML - How To Do Rollover Buttons And Also Preload Images!!!
here 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> Similar TutorialsWhat code should be added to have onmouseover images or other images to preload? web page http://members.dodo.com.au/~rouslan/...ite/index.html 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 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 Hello 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'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 am developing a site and the client would like to have images instead of radio buttons, how can I do the followings: 1) Replace the radio buttons for different images 2) When one radio button image is selected, changes to another image Thanks, Valeria 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 assume there must be some kind of html code that refuses to display the html until it is fully downloaded? One could see at the bottom of the browser window the text that says, "Waiting for http://www.website.com" and then when the page is in memory it "snaps" on to the screen. I have already optimized all the splices, etc. Just trying to find a way to preload a site, but then only view it when it is fully loaded. in fact how to achieve this sequence: 1) user requests index.html, style css 2) preloading image.jpg 3) loading and displaying content in <body></body> these things didn't work for me: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(498,527) Image1.src = "body_bg-contacts.jpg" </SCRIPT> and #preload img { height: 0; width: 0; border-width: 0; position: absolute; bottom: 0; left: 0; z-index: -30; } <div id="preload"><img style="visibility:hidden;position:absolute;top:-1000px;left:-1000px;" src="images/body_bg-res.jpg" /></div> When I used the above or similar I still had smaller images and buttons loading before my main body_bg-contacts.jpg was actually loaded. Any ideas of how to really control image preload? I've tried some css and javascript codes, but as I said the MAIN IMAGE is not being loaded first. is there some way so that i can have the rollover image appear anywhere on the page instead right over the original image?? please help thanks! 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!!) Okay, so I've been seeing these sites with text that you rollover and a box with more info appears. How do you do this? JS? CSS? It's hard to explain, so I'll look for an example. Note to mods: I don't know where this would go, so feel free to move it. EDIT: I know you can use the title attribute, but that's not the same thing Thanks. 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!! 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 <TR> <TD ROWSPAN="1" COLSPAN="1" WIDTH="156" HEIGHT="156"> <A HREF="#" onMouseOver="playSound(0)""if(document.images) document.BACKGROUND2WHITE0.src='piece1.jpg';" onMouseOut="stopSound(0)""if(document.images) document.BACKGROUND2WHITE0.src='piece1.jpg';"> This code was written to play a music file and change the image while the mouse hovers over it, and when the mouse is taken off, the music stops and the image reverts to its original picture. There is code before this which stores the music file. My problem: When i put the mouse over it, the music plays but the image doesn't change. I'm an amateur at HTML so someone please tell me, what am I doing wrong? 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> 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. 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>
I'm not sure whether this would be html or CSS.. but does anybody know how to get rollover text to popup using html or CSS like I have circled in this screenshot?: http://i134.photobucket.com/albums/q...eenshot_03.jpg Any help is greatly appreciated. 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? |
|||||||