|
HTML - Mouseover Background Problem
Ok, I dont paticualy want to use flash for this as im not very good with it.
I have these 4 images: Background.gif Background-Open.gif Background-Close.gif Background-Side.gif As you can see there is the completely closed, the opening, the closing, and the completly open. What im trying to acheive is an entrance page. On mouseover the image changred from background.gif to background-open.gif and then when the door has opened to stay at background-Side.gif. Then, once the mouse is taken off basicaly the reverse. So background-Side.gif change to background-Close.gif and then to stay at background.gif. Ive seen this on other websites...any ideas? Similar TutorialsHi all. I created a rating system for a web site. However, the same code is used on two diff pages, yet it acts differently. I do have a little change in design between the 2 pages, but not much. Its the stars on the middle right of the page. When you mouseover them, it should change them to the rating (1234 or 5) that you are moused on. However, on the 2nd link below, when you mouse over the 4th star, it doesn't work. It will work if you mouse over the space between the 4th and 5th star, but not the 4th star it self. The one that works is: http://www.bartending.com/drinks_rec...ini&parm=title The one that is having problems is: http://bartending.com/drinks_recipes...arm=ID&celeb=9 Any help you have would be much appreciated =) Thank you =) Light and Love and Healing to you, -Patrick Arden McNally I'm trying here again 'cause last time I got some excellent help. I'm building an image-flipping thingy and i've got the mouse-overs and mapping done right but there's one thing I can't figure out. How can I make it so the image will NOT revert back to the first ("plumbing") one until another button is moused-over? I'd like the user to be able to move their mouse around the picture without it switching back. Here's the code: Code: <html lang="en">
<head>
<base href="http://fulfordsupply.com/frameset/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
body {
background-color:#666;
}
#org {
display:block;
width:570px;
height:269px;
border:2px solid #000;
margin:auto;
}
</style>
<script type="text/javascript">
pic=[];
pic[0]=new Image(570,269);
pic[0].src='images/plumbing.jpg';
pic[1]=new Image(570,269);
pic[1].src='images/heating.jpg';
pic[2]=new Image(570,269);
pic[2].src='images/design.jpg';
pic[3]=new Image(570,269);
pic[3].src='images/green.jpg';
function swapMapImage(){
obj=document.getElementById('org');
ar=document.getElementById('boiler-room').getElementsByTagName('area');
for(c=0;c<ar.length;c++) {
ar[c].number=c;
ar[c].onmouseover=function() {
obj.src=pic[this.number].src;
}
ar[c].onmouseout=function() {
obj.src=pic[0].src;
}
}
}
if(window.addEventListener){
window.addEventListener('load',swapMapImage,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',swapMapImage);
}
}
</script>
</head>
<body>
<div id="boiler-room">
<img id="org" src="images/plumbing.jpg"(570,269) usemap="#fancy" alt=" ">
<map name="fancy">
<area shape="rect" coords="1,1,144,66" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=712&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,64,144,131" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=712&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,132,144,200" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=812&_UserReference=4E72E30471320B6E4BB4C6CF" >
<area shape="rect" coords="1,201,144,267" href="http://fulfordsupply.com/frameset/lowerframeset.taf?Item_uid=817&_UserReference=4E72E30471320B6E4BB4C6CF">
</map>
</div>
</body>
</html>
Thanks in advance for your help! Hello! I'm having trouble with a mouseover image I'm using. I've done mouseover before, but for some reason, it isn't working for me! It is a download button, and if you move your mouse over it, it is supposed to be highlighted. I have it on the page 11 times. If I use it just once, it works. If I use it more than once, it doesn't work. Can anyone tell me why? Much thanks!! http://slw.110mb.com/templates/tindex.html - the page http://slw.110mb.com/mainstyle.css - css page if you need it Hi guys, I am really new to this. Currently designing a site for an engineering firm and have come up against a slight problem. I am designing a table with links to the other pages, when any part of the cell is mousedover the text colour and background image are supposed to change and then revert back to the original when mousedout, thats no problem, but when I add the link in the whole thing goes to pieces. The background image changes but the text colour doesnt, as can be seen from the "relocation" link on the webpage. You can view the page here http://www.omdtestdomain2.co.uk/?id=93637&option=1485 Any help would be greatly appreciated. Thanks Simon For some reason in my website, my table moves over when you mouseover it. I do not have a mouseover code activated for that. So I don't know why it is happening. Here is a link to the page that it happens on: http://white-candle.net/Business.html It is the box right above the form. Here is the code for my table: Code: <table width="327" border="6" cellpadding="1" class="text" style="line-height:12px ">
<tr>
<td><CENTER><p>If you are interested in joining a team that is dedicated to helping you succeed, please fill out the form below!</p>
<p>You will receive for free, a few scent samples, a brochure with the product price list, a business card, an informative mp3 pack, and a getting started PDF.</p></CENTER></td>
</tr>
</table>
I'm using dreamweaver if that matters. I have a picture that I have used in Front Page as a background. The picture continues to tile to the right and also down. I do not want the tile period. I want the background to only stay behind the table that I am using. Any suggestions will be appreciated. Thanks Much Launchnet Eyup people I was just wondering how I would go about centering or stretching a background image on a webpage without it doubleing itself. i hope that makes sense lol... sorta like when you set a wallpaper on your computer screen and set it to "tiled", there maybe more than 1 image showing. Id just like it to be stretched. any help would be appreciated thanks Hello guys, I have just created very simple website with an older Flash 7. Then I had embeded that .swf file on simple html document. (I did input code for black body background): <body bgcolor="000000"> It looks OK on Safari, but for some reason, background color turns white when viewed on FireFox. I dont have Internet Explorer, so I don't know how it looks there. Any idea what I do wrong? Here is the link to that website: http://www.icebergfilms.com Thank you for any advise. I have 3 images, one is a background image that repeats, one is aligned left and another is aligned right. <td background="screen_header_02.gif" height="103"><img src="screen_header_04.gif" align="left"><img src="screen_header_03.gif" align="right"></td> it is fine, but the background image is not viewable when printing. so i need to come up with another way of using 3 images in the way i have, without using the background image. any ideas? Basically i have made this site and i am having problems with the nav bar. http://www.srnsf.com As you can see it resizes at certain pages and it looks strange. Why is this happening? Hello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{
background: url(Template4_06.jpg);
}
Hi, i want the background color of a div to only span a percentage of the div. For example HTML Code: <div style="width: 90%; padding: 1%; background: green;">50%</div> But i only want the green background colour to span the percentage (in this case 50%) of the div. Is this possible, and if so can somebody point me in the right direction? Thankyou. Hi, I am having dramas with a template and it lining up with the Backgroung Image. The template has the same background image as the page background but its like a mesh effect so its a real pain in the butt to line up. And its not working because different screen resolutions and browser widths move the template on the page background. See he http://www.superiorshine.com.au/new If you load the page and the make your browser width smaller you will see the template move along the background image this is why it never lines up cause its floating all over it. Is there anyway i can stop this? I have spent a total of 7 hours fiddling with the background and i still cant get it to work. My last resort is to go into the .PSD and make the website width and height bigger then peoples resolution and save for web and make the bits outside the template (background image) a picture in a cell so the page doesnt see images and expands the scroll bars. Here is the template overlapping: www.superiorshine.com.au/sample/overlap.jpg Any other idea's as this is really getting to me LOL.. Cheers First Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? Hi, I have an image "m1" set as the background of a table on my website. The table is set to the width of the image "340". However, when I add text it pushes the border and the image repeats/cuts off. http://www.monkeygambling.com/newpage.htm This problem only happens in IE, not in opera. Can anyone help? thanks Well I got a website I want to code and I'm not too good in coding though I'm designing/coding websites for 2-3 years(ocassional hobby).I always tried and retried and asked and searched but I always got side effects.So I want to make this one by-the-book 100% XHTML Strict/transitional W3C Valid So I was thinking where should I start with and I thought I should start with the background.I can't seem to manage even this one. As in every single thing I ever done I can't get it to look the same in every evil screen resolution ....Enough talking.As you see in the picture it has 2 parts. the first is a gradient from blue to white(bottom to top) and the other part is a black pattern thing. How can I implement it?I can't simply adjust it's size to fit my resolution and browser.It needs to look the same for everyone. Also while the top part can be made with a vertical 1px slice the bottom one has a pattern so it can't. i was thinking I could divide the website in 2 DIVS:main and footer and set a height percentage % like 80&20 from CSS.Use as background for main a vertical slice and a big image for the footer.But still that wouldn't fix too much ...I don't know. What would you do if it was your website? _____________________________ Hey guys, please forgive me if this has already been posted but im at a total loss I'm having major issues with getting a background to fit properly around my html page. I wonder if you can help me. the code i have is this style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(http://i488.photobucket.com/albums/rr248/kingofkingspoker/borderbg.png);" id="homediv" onload="start();" alink="#000000" link="#000000" vlink="#000000"> I really have no idea how to fit it to the whole screen so it doesn't look like the border around the BG image is cutting half the page up and repeating. If this cannot be corrected is there a code i can add to it to implement a border around the actual web page in full, as if to say i could remove the background image, have it has standard white but use a code to implement a border that would look fine on all computers. Plz Help I used the following code in Firefox-3.0.4 (Full Screen mode) . I have two vertical frames (Video and messenger). In the video frame VLC playing on top of the video frame (Not embedded into HTML). The Video is playing correctly, except sometimes only "a black color background" comig, not always (Within the video frame, vertically left-half/right-half/Full of the frame is black color background) is appearing between VLC-video and Frame. Since I have positioned the video (top:8px; left:57px), I can noticed when above taken place. Actually, in my application VLC is independent of Firefox/HTML.l So I want to avoid the black-color background. I dont want the black color background. Actually, this is happening when skin changes, the code attached is currently having skin_10 (for resolution 1024x768). Similarly changing skin_1 for the same resolution, but cols, and rows only changing. ie. frame size is changing for different skins. (Every skins having different rows and cols) I attached 5 images, 1. bg_skin_1024_768.jpg =>skin background image 2. sample.jpg => a sample required output image. 3.sample_left_black.jpg => Error with left side black background 3.sample_right_black.jpg => Error with right side black background 3.sample_full_black.jpg => Error with full black background Please can anybody know about this issue me? thanks Kanesh <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> </head> <frameset rows="0,*" cols="*" style="background-color:#ffffff;" frameborder="NO" border="0" framespacing="0" > <frame src="121term_ctrl.php" style="background-color:#ffffff;" name="control" scrolling="NO" framespacing="0" noresize="noresize" > <frameset style="background-image:url('./skin/skin_10/images/1024_768/bg_skin_1024_768.jpg'); background-repeat:no-repeat;" cols="704,*" margin-height="0" frameborder="no" border="0" framespacing="0" noresize="noresize"> <frame transparency="true" src="vp/play_video.php?width=704&height=658&top=57&left=8" frameborder="0" margin-height="0" scrolling="no" name="video" noresize="noresize"> <frame transparency="true" src="./skin/skin_10/messenger.php?width=320&height=768&top=200&left=20" frameborder="0" margin-height="0" scrolling="no" name="messenger" noresize="noresize"> </frameset> </frameset> <noframes> </noframes> </HTML> My Headfirst book on page 404 says to add the background-image property to a paragraph so I add the code for that and a few other changes highlighted in bold in last paragraph but it doesn't show the image on the browser and the css validator does not show it as an error, also what I don't understand is why there are THREE classes with the same name [.guarantee] in this stylesheet? The url is: file:///C:/Headfirst/HFHTML_ch10/lounge/lounge.html body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 body { font-size: small; font-family: Verdana, Helvetica, Arial, sans-serif; line-height: 1.6em; } h1, h2 { color: #007e7e; } h1 { font-size: 150%; } h2 { font-size: 130%; } .guarantee { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; line-height: 1.9em; font-style: italic; font-family: Georgia, "Times New Roman, Times, serif; font-color: #444444 background-image: url (images/background.gif) ; } Hi all, I want to have 2 images as backgrounds but have one on top of the other. Is this possible? If so how would I do it / what is the code? Cheers Raggy |
|||||||