|
HTML - Problem With Mouseover And Links
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 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 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? 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 made a link in the middle of a paragraph and now the text that follows the links is activated and appears red when I roll over it (as do my links). I thought I ended the links properly but perhaps not. Any advice? Xhtml 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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>About</title> <link rel="stylesheet" type="text/css" href="../style.css" /> <meta name="generator" content="BBEdit 8.6" /> </head> <body> <div id="wrap"> <div id="header"> <p id="navbuttons"> <a href="../index.html">home</a> <a href="artists.html">artists</a> <a href="writing.html">writing</a> <a href="about.html"class="current">about</a> <a href="links.html">links</a> <a href="contact.html">contact</a> <a href="listings_news.html">news+listings</a> </div> <!-- end #header --> <div id="main"> <div class="about"> <p>Gray Art seeks to promote an active discussion about contemporary art. We are interested in up and coming artists who are do not yet have representation, and we will feature a new artist every two weeks on our <a href="artists.html"> ARTISTS<a/> page. We like art that is fun, offensive, loud, political and bold and are open to any and all media. Writers and critics (professional or not) are encouraged to submit essays, reviews and rants to be posted in the WRITING section. </p> <br> </div> <!-- end .about --> <div class="about2"> <p> If you would like your art to be featured on our artists page, please send several images as well as a brief description of yourself and your work to artists@grayart.com. If you want to write for Gray Art, please send an a brief description of what you want to write about to writing@grayart.com.</p> </div> <!-- end .about2 --> </div> <!-- end #main --> </div> <!-- end #wrap --> </body> </html> __________ CSS code: /* alignment ------------- */ body {margin:0;padding:0;} #header {position:relative; top:-2.7em;} #wrap {max-width: 900px; min-width: 480px; background:url(header_graphic.jpg) no-repeat; width:90%; margin:20px auto; padding:30px 20px 0 0; } #navbuttons {position:relative;top:2.5em;left:14em} /* index ------------- */ .upnow h1 {margin-left:100px; margin-top:70px;} .table p {margin-left:135px; margin-top:25px;} .photo img {left:7empx;position:relative; margin:20px;margin-top:0px;} .photo img {border:none;} /* artists ------------- */ #sidebar {position:relative;margin-left:75%;width:20%;background:red;padding:4px;align:top; border: 2px dashed black;} .feature h1 {margin-left:100px;margin-top:70px;} /* writing ------------- */ .new h1 {position:relative;margin-top:50px;margin-left:100px;} .essays {position:relative;margin-top:30px;margin-left:100px;} .reviews {position:relative;margin-top:2em;margin-left:100px;} /* about ------------- */ .about p {position:relative;margin-top:100px;margin-left:100px;width:500px;} .about2 p {position:relative;margin-left:100px;width:500px;} /* links ------------- */ .links {text-align:center;margin-left:190px;margin-top:100px;postion:relative;} /* text styles ------------- */ #navbuttons {font-family: "Futura", sans-serif; font-weight:lighter;right:-6em;font-size:14px;color:black;text-transform:uppercase;word-spacing:25px} a:link {color:black;} a:visited {color:black;} a:active, a:focus, a:hover {color:red;} a {text-decoration:none;color:black;hover:none} a:hover.current {color:gray;cursor:default} /* index ------------- */ .upnow h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .table p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px; white-space:non-wrapping;} /* artists ------------- */ .feature h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* writing ------------- */ .new h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 18px;text-transform:uppercase;} .essays h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .essays p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .reviews h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* iframe ------------- */ iframe { position: absolute; left: 60%; top: 10em; width: 200px; scrollbar-face-color:##FFFFFF; scrollbar-shadow-color:#d7d7d7; scrollbar-highlight-color:#d7d7d7; scrollbar-3dlight-color:#d7d7d7; Scrollbar-Darkshadow-Color:#d7d7d7; scrollbar-arrow-color:#7a7a7a; scrollbar-track-color:#FFFFFF; } /* about ------------- */ .about p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .about2 p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} /* links ------------- */ .links h1, h2 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 16px;text-transform:uppercase;} .links p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} Ok i have just started an html tutorial and stumbled accross a brick wall. Its about the links. Every time i click on the links it says File not found. My html code is separated in three .html documents all located in the same folder... The code i am using to add the links is: <div id="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> Is it this code or? Btw my .html documents are named just like the above code says: index.html, about.html and contact.html. So i dont think that could be the problem... Please help! I use Blogger but my template is in the classic format so it's HTML not XML and i have a "homepage" sort of thing when you first enter with links to entries, affiliates etc. The problem with my archives is that when someone clicks on a certain month, e.g. January 2010, it jumps back to the "homepage" and you have to click on entries again to view posts from January 2010. Is there any way to fix this? Thanks in advance for any help. Hey guys, I'm having crap luck with something I'm trying. A little experiment if you will. So heres the deal, basically I took some footer links on a site that I'm redesigning for a lady. (Also with that said ignore all the other code that you see on the page its work in progress, I'm basically taking old html/tables redoing it into xhtml/divs). So my problem is if you see the footer links at the bottom of the page first look at them in FF, basically what I did was removed the line under the anchor and I added a nifty little border-bottom instead. Code: #footer-links a:link {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer-links a:visited {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer-links a:hover {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #f1037f;
}
Problem is IE will not show this correctly. So I assume it doesn't like the way I did the border-bottom. So I figured ok thats fine in IE I'll just show it normally. So back in my markup I added this to fix it. Code: <link type="text/css" rel="stylesheet" href="style.css" />
<style>
<!--[if IE ]>
#footer-links a:link {
color: #808080;
text-decoration: underline;
}
<![endif ]-->
<!--[if IE]>
#footer-links a:visited {
color: #808080;
text-decoration: underline;
}
<![endif]-->
<!--[if IE] >
#footer-links a:hover {
color: #f1037f;
text-decoration: underline;
}
<![endif]-->
</style>
I even put this under the link to the style sheet so it would override. Its not working though. Please look and help if you all can. http://www.atlanta-web.com/acm/index.html Thanks, Eric Hi all, I was wondering if anyone knows how you can force a page to automatically jump to an anchor link on that page...for example so the visitor doesn't have to scroll down everytime. I know I can just put: <a href="http://www.site.com/about.htm#anchor"></a> in the links etc...but is there a way to force a page to jump to the anchor without putting it in the links? Thanks ~Paul (ps. The reason is because my blog is a whole screen down on most screens, so when someone click on an archive etc...they have to scroll down over and over) Hello all, thought maybe someone could help me with a basic problem I'm having. I am fairly new to html and stuff but am off to a start to get a site running. The problem I am having is that the image i am using to link is offset vertically with vspace = 11 in order to line up lines with a border type thing. However, when you click the image link it includes the 11 pixels underneath it from vspace as part of the clickable link. Is there a way to make it so that only the image itself is a link and still add the 11 pixel spacing under it to get the image to line up with the rest of the site? Thanks! Code: <img style="width: 51px; height: 57px;" alt=" " src="images/icon/left.bmp"><a href="main.html"><img style="border: 0px solid; width: 92px; height: 30px;" alt=" " src="images/icon/bt1.bmp" vspace="11"></a> Code is just the part of the 2 images: the first image, and the linked image that I want to line up with the first image. Hey guys, Okay so here is what I am trying to do. I am populating a table with some info from a database. The data should look something like this. Recipe Name - Prep Time - Total Time- Rating ============================ test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 The names of the recipe is what I want to create as links so that when the user clicks on a certain RECIPE NAME another page will open showing only the data that goes with that recipe he/she clicked on. So far I have not gotten my code to work correctly, i dunno if i am missing something or doing it all wrong? I am using a while loop to generate all the recipes form the database. Again, i want the names of the recipes to be the links. Please help me!!!! Thanks for your time and help Here is my code: <? while( $row = mysql_fetch_array( $result ) ) { ?> <tr> <a href="ShowRecipe.php?id=<?=$row['id']?>"></a> <td><?=$row['name']?></td> <td><?=$row['preptime']?> mins</td> <td><?=$row['totaltime']?> mins</td> <td><?=$row['rating']?></td> </tr> <? } ?> My fault, the padding pushed the div outward covering the links at the bottom. Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! why mouseover function still not working for my page http://members.dodo.com.au/~rouslan/...ite/index.html ? e.g. buttons don't change color when you mouse over them. I followed exact instructions provided on http://graphicfreebies.com/scripts/mouseover.txt but still not working. anyone have a clue why is that? what am I missing? I'm pretty new to HTML hi guys i am new here so take it easy on me lol. Ok heres what I am trying to do, on my webpage I have a section called services and I would like the following to happen. I have a line "All aspects of Leadwork from flashings to bay tops and dorma windows" I would like a thumbnail to pop up when the mouse hovers over it ie a thumbnail of my leadwork. Is this possible and can anyone generate a script for me? Thanks steve http://www.dohertyplumbing.co.uk I want to change my paypal buy now button, to my own button. I have the same button in 2 colors and want to use mouseover to switch between them. The code is an image not a url so I need some help. Here is the code for the image. <input type="image" src="./buy.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> How do I make the mouseover work on that? Okay, this is really frustrating. I have seen a few websites where they use 3 images for a mouseover in 4 stages. 1. Image #1 2. Mouseover, Image #2 3. Mouse Off , Image #3 4. Returns to Image #1 I have searched and searched for this on google and other sites, but cannot find a thing. Here are the images i am using: Image #1 http://img24.imageshack.us/img24/1509/normalz.gif Image #2 http://img19.imageshack.us/img19/5186/outqpz.gif Image #3 http://img21.imageshack.us/img21/1889/75176722.gif As you can see, i am trying to create an effect where someone puts the mouse over, the "Doors" open, where there will be a password field, and then on mouse off the "Doors" close. Please, someone help! Hi, just wondering how I can code a table which changes on a mouseover, like on this website? Tried looking at their source, but I can't seem to get the right bit! Cheers for any help Joe I'm currently using onmouseover events to call a picture from another location on the same page using: <div> <img name="rollover" src="image.gif" /> </div> and calling images from: <a href.... onmouseover=' rollover.src=" newimage.gif " '> This works fine. What I want to do is call text into another <div> on the same page. Is this possible? I'm relatively inexperienced using JavaScript so any hints would be welcome. |
|||||||