|
HTML - Onmouseover Highlighting Inconsistency?
Hi:
- All of the left-menu icons correctly highlight when I scroll over them except for the one (which I have most recently added to the site) - All of the left-menu icons correctly remain highlighted when I travel to any given corresponding destination page on the site Here's the function call of the menu button in question...this is logically identical to the other function calls invoking mouse-over "highlighting": <div><a href="destination.html" onmouseover="java script:rollOver('ln_07','ln_07_ov');" onmouseout="java script:rollOver('ln_07','ln_07');"><img src="img/ln_07.jpg" name="ln_07" alt="Destination" width="126" height="26" border="0"></a></div> Just to restate: the scroll-over highlights are correctly invoked in all instances with the exception of the one menu icon applicable to all pages of the site except its destination page (where it correctly remains in highlight mode...) Many thanks-- BR Similar TutorialsBoth work fine in Firefox. Code: Code: <style TYPE="text/css">
<!--
#rotate
{
background: url(/images/banner/players/rotate.php) no-repeat center top;
color: inherit;
width: 967px;
height: 202px;
}
-->
</STYLE>
<table width="967" height="202" id="rotate" style="cursor:pointer;" onclick="location.href='';">
<tr valign="top">
<td width="222"> </td>
<td width="733" style="padding-top: 9px">
<script type="text/javascript"><!--
google_ad_client = "pub-8692420629844560";
/* 728x90, created 10/7/10 */
google_ad_slot = "0662884499";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
</table>
In IE, works fine on site - ad is placed perfectly: In forums, using same code, the ad is misplaced slightly, and shows more of the white space from when the banner was designed, as a placeholder for ad: Banner design, w/ whitespace - creates a 1-px white border around ad: Any ideas what could be causing the inconsistency? As far as I know, it's IE only. Hi all! I mainly use the above mentioned three browsers to test my page layouts. I just need to know how I can eliminate most of my inconsistency problems, i.e. pages not looking the same in terms of fonts, alignment etc. across multiple browsers. Is there a way I can check and eliminate these problems quickly? Macromedia Dreamweaver is not an option. I mainly use HTML-Kit to design my sites. See www.agriads.co.za for an example. Well hello folks. Nice place you have here. This looks like just the place to ask a question I have, I hope you'll indulge me. I'm working through my blog site and trying to get it up to xhtml snuff...but that's another issue. What I'd like to start with is a little quirky problem that only seems to effect IE6. When users try to highlight text, odd things happen. Here's one person's attempt to explain it: Quote: This is the pattern: Highlight works on the page displayed on the screen (either main page or each entry). The spot I pointed to before is where the screen display ends on my initial main page load. Once I click on each entry, highlight works on the text displayed on that initial screen - it stops working (starts highlight blocks) once I scroll down beyond that initial screen display. It seems to repeat this pattern with quotes, comments, or just entry text - just beyond that initial screen. Hope it helps. I believe this highlighting issue has to do with my use of css positioning. Let me show you just the key parts of the html page, and then the corresponding bits of the stylesheet. Let's say we have a page consisting of the following div's: Code: <div id="overall"> <div id="titlecell"> <div id="navbar"> <div id="maincell"> <div id="titlebarright"> <div id="leftmargin2"> <div id="rightmargin2"> Here are the related bits of CSS: Code: div#overall {
position:relative;
width: 1000px;
margin: auto;
}
div#titlecell {
text-align: right;
vertical-align: top;
height: 150px;
font-size:x-small;
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
}
div#navbar {
font-size:x-small;
position: absolute;
top: 15px;
left: 650px;
}
div#maincell {
color: #252525;
text-align: left;
vertical-align: top;
padding-top: 30px;
width: 580px;
position: absolute;
top: 160px;
left: 0px;
}
div#titlebarright {
width: 382px;
height: 185px;
background: url(http://www.solomonia.com/images/titlebarrightbox.gif) no-repeat;
position:absolute;
top:95px;
left:600px;
}
div#leftmargin2 {
height: 10000px;
color: #252525;
vertical-align: top;
text-align: center;
width: 160px;
padding: 0;
position: absolute;
top: 285px;
left: 600px;
}
div#rightmargin2 {
height: 10000px;
color: #252525;
width: 220px;
text-align: center;
vertical-align: top;
padding: 0;
position: absolute;
top: 285px;
left: 763px;
}
So note, we have a div called "overall" whose position is set to "relative" which functions as a container for all the other divs with position set to "absolute." I'm figuring there's something about this that gives IE fits when highlighting. What do you think? Edit: My apologies. This probably should have been put in the css forum. I have xhtml on the brain I guess. Please feel free to move. I'm trying to draw the visitor to this link from my site to the name, "Brett Allen", so they don't have to look though all the names to see it there. I've tried adding to the link, #brett, #brett+allen but it don't do anything. I can't add < A NAME="codeword" > to the page on nypost site, as its not mine. So, any ideas what I can add to the link? http://www.nypost.com/seven/09222006...y_weekend_.htm Hi, i am sure you's are all familiar with photobucket, well i was wonderig if anyone knows the code to automatically highlight and copy to the clipboard information in a box when it is just simply clicked like it does with the ht code, image url, etc next to your picture on photobucket. thanks, karl Hey all! I'm trying to set a predefined value in a <select> menu, that is to say, I want something to be highlighted before the user does anything. I've tried the following: <select name="test" size="2" value="x"> <option>x</option><option>y</option> </select> This does not work. Any advice would be great! Thanks for your time. Hi, I need to move the hide content link from the bottom up to the top. It needs to replace the show category. Example: show category is clicked hide category is then displayed. When hide category is clicked show category is displayed. Also I can't seem to make the 1 2 3 4 buttons highlight when active. When you click on a number it slides along to that number but doesn't highlight what number you are on Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color:#FF0000;
}
a:link {
color: #999999;
text-decoration: none;
font-size:14px;
}
a:visited {
color: #999999;
text-decoration: none;
font-size:14px;
}
a:hover {
color: #FF0000;
letter-spacing: 3px;
text-decoration: none;
font-size:14px;
}
a:active {
color: #FF0000;
font-size:14px;
}
#wrapper{
position:relative;
width:730px;
height:600px;
margin:0px auto;
}
#images{
width:730px;
height:552px;
overflow:hidden;
float:right;
position: absolute;
top: 48px;
}
#textbox{
position: absolute;
width:205px;
height:40px;
background-color: #FFFFFF;
top: 68px;
left: 20px;
z-index: 2;
padding: 10px;
border-bottom: 2px solid red;
}
#logo {
position: absolute;
width: 101px;
position: absolute;
left: 634px;
top: 19px;
padding: opx;
margin: 0px;
z-index: 2;
}
.more {
display: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border-bottom: 2px solid red;
padding-left: 8px;
padding-right: 8px;
margin-left: -10px;
width: 209px;
}
a.mo hover {
text-decoration: none;}
a.showLink, a.hideLink {
text-decoration: none;
font-size: xx-small;
color: #36f;
padding-left: 8px;
/*** background: transparent url(down.gif) no-repeat left;***/ }
a.hideLink {
/*** background: transparent url(up.gif) no-repeat left;***/ }
.drop1 {
font-size: 12px;
font-weight: bold;
}
.drop2 {
color: #666666;
font-size: smaller;
}
#apDiv1 {
position:absolute;
left:0px;
top:px;
width:141px;
height:21px;
z-index:1;
}
</style>
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id= logo><img src="logo2.png" width="101" height="92" /></div>
<div id="textbox">
<div><img src="logo_dedon.png" alt=""/>
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><img src="ShowProduct.jpg" alt="" /></a><br />
<img src="clear.gif" alt="" width="135" height="10" />
<a href="#image1" id="tab1">1</a>
<a href="#image2" id="tab1">2</a>
<a href="#image3" id="tab1">3</a>
<a href="#image4" id="tab1">4</a> </div>
<div id="example" class="more">
<p><span class="drop1">BARCELONA</span><br />
<span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"><img src="HideProduct.jpg" alt="" /></a></p>
</div>
</div>
<div id="images">
<div><a name="image1"></a><img src="001.jpg" alt="" title="" /></div>
<div><a name="image2"></a><img src="002.jpg" alt="" title="" /></div>
<div><a name="image3"></a><img src="003.jpg" alt="" title="" /></div>
<div><a name="image4"></a><img src="004.jpg" alt="" title="" /></div>
</div>
</div>
</body>
</html>
Please can some one help? many thanks Joe Any good onmouseover tutorials? Thanks. I have created an image map using a map of the USA. In this map it displays our home office and branch locations. I would like for a small box to appear (and stick) that displays the office address when/if the star or other icons are passed over. I have not done this since college and have no clue what to script. LOL, can anyone help an old fart? It won't work.... HTML Code: <a href="index.html"
onmouseover="window.status='home'; changeImages('home', 'images/home-over.jpg'); return true;"
onmouseout="window.status=''; changeImages('home', 'images/home.jpg'); return true;"
onmousedown="changeImages('home', 'images/home-over.jpg'); return true;"
onmouseup="changeImages('home', 'images/home-over.jpg'); return true;">
<img name="home" src="images/home.jpg" width="109" height="100" border="0" alt="home"></a>
any help? Hi All, I would like to create a little message box when the user puts the mouse cursor on a text entry in a table. The message box would contain text only. Can someone point me in the right direction for the code to do this? What I have found so far calls another webpage. Is that the only way to do it? Thanks!!! Hi! I've something like that:: <body> <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1"> <tr> <td width="36%">Contact</td> <td width="26%"> <p align="center"> <img border="0" src="IMAGE URL ..."></td> <td width="38%"> </td> </tr> </table> </body> How can i make to when i pass mouse in Contact display another image in middle colunm? Can you help me? Hi Colls, I have a task such this: At onmouseover, i need to swap the jpg with marquee text. I have tried a lot of things but probably i think in wrong direction. Coudl you help about it? Thank you in advance. Hi Guys/Girls, Im in a sticky situation i have been searching the web and forums for a tutorial or example on how to create a popup box when the mouse cursor glides over it. what i want to achieve is something like this if you can please browse to http://www.uncle-buck.co.uk/Need-Mon...ncle-Buck.htm# if you hover over "See representative example >" you will see a popup box appear i want to achieve just that im not fussed on the color etc at the moment i ideally would like to get the functionality working correctly and then make it look nice later. if someone can help me i really would appreciate or even better if you know of or have seen a tutorial based on this then please do share it with me. Hope to hear from someone soon. Thanks On my employer's site, I am trying to create certain mouseover events for the navigation bar. My goal to to either create alternate colored text on mouseover (which it currently does) and return to normal text (either link color or vlink color, which it doesn't), or change the text background color on mouseover, and back on mouseout (with appropriate colors, link/vlink). The code is as follows: <table width="740" border="1" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr> <td width="100%" height="7" align="center" valign="top" colspan="1"> <font color="#707BA8" face="Trebuchet MS" size="5"> <a href="index.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Home</font></a> <a href="about.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">About Us</font></a> <a href="contact.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Contact Us</font></a> <a href="links.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Links</font></a> <a href="questions1.htm" style="text-decoration: none"><font onmouseover="color='#4682B4'" onmouseout="color='normal'">Q&A</font></a> </td> </tr> </table> With the body defined as follows: <body bgcolor=#FFFFFF background="images/bg1.jpg" link="0000FF" vlink="#4B0082" alink="#57E964"> Any assistance is appreciated, thanks. I have a table on my page in which I have overridden the onmouseover and onmouseout event handlers. Those event handlers get called just fine when the mouse enters or leaves any of the objects contained within the table, but they do not get called when entering or leaving the table itself. Is that the expected behavior? I would have thought that those handlers would also get called for the table itself. Do I need to attach those event handlers to a higher level object (containing the table) in order for them to get called upon entry and exit of the table? Interestingly, the event handlers get called when entering or leaving a cell (a td item) of the table, but they do not get called when entering or leaving a row (a tr item) of the table. I would be happy if I could make it call the event handlers for the row as well, but so far have had no luck doing that. I've got a problem...I make a page...only for training.....but i've got some problem with the HOVER...i have to wait a long time and after,the HOVER is work.Can help me someone to make it faster?pls..here is the page http://piticu.byethost14.com/site2/index1.php and the code for the submenu Code: <td valign="top" id="left_menu"> <table border="0"> <br /> <tr> <td style="border:0" align="center"> <b><i><h2 style="color:#FFDEAD;text-decoration:underline overline">CATEGORIES:</h2></b></i> <a href="" onmouseover='animal.src="submenu/animal2.png"' onmouseout='animal.src="submenu/animal.png"'><img src="submenu/animal.png" name="animal" border="0"></a><br /> <a href="" onmouseover='car.src="submenu/car2.png"' onmouseout='car.src="submenu/car.png"'><img src="submenu/car.png" name="car" border="0"></a><br /> <a href="" onmouseover='cartoon.src="submenu/cartoon2.png"' onmouseout='cartoon.src="submenu/cartoon.png"'><img src="submenu/cartoon.png" name="cartoon" border="0"></a><br /> <a href="" onmouseover='celebrity.src="submenu/celebrity2.png"' onmouseout='celebrity.src="submenu/celebrity.png"'><img src="submenu/celebrity.png" name="celebrity" border="0"></a><br /> <a href="" onmouseover='digital.src="submenu/digital2.png"' onmouseout='digital.src="submenu/digital.png"'><img src="submenu/digital.png" name="digital"border="0"></a><br /> <a href="" onmouseover='fantasy.src="submenu/fantasy2.png"' onmouseout='fantasy.src="submenu/fantasy.png"'><img src="submenu/fantasy.png" name="fantasy"border="0"></a><br /> <a href="" onmouseover='fine.src="submenu/fine2.png"' onmouseout='fine.src="submenu/fine.png"'><img src="submenu/fine.png" name="fine"border="0"></a><br /> <a href="" onmouseover='holiday.src="submenu/holiday2.png"' onmouseout='holiday.src="submenu/holiday.png"'><img src="submenu/holiday.png" name="holiday" border="0"></a><br /> <a href="" onmouseover='nature.src="submenu/nature2.png"' onmouseout='nature.src="submenu/nature.png"'><img src="submenu/nature.png" name="nature"border="0"></a><br /> <a href="" onmouseover='movie.src="submenu/movie2.png"' onmouseout='movie.src="submenu/movie.png"'><img src="submenu/movie.png" name="movie"border="0"></a><br /> <a href="" onmouseover='space.src="submenu/space2.png"' onmouseout='space.src="submenu/space.png"'><img src="submenu/space.png" name="space"border="0"></a><br /> </td> <tr> </table> </td> and here is for the submenu left: Code: <td valign="top" id="content"> <table border="0" width="700px" class="one" align="center"> <br /> <tr align="center"> <td colspan=3 align="center" style="border:0"> <b class="one" style="color:#FFDEAD"><u><i>Top Quality Free Wallpaper for your Desktop</i></u></b><br /> <b style="color:#FFDEAD">Click on images to see the whole selection of wallpapers in each category<b><br /><br /> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Animals:</b><br /> <a href="animals.htm" onmouseover='animals.src="images/animals1.jpg"' onmouseout='animals.src="images/animals.jpg"'><img src="images/animals.jpg" name="animals"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cars:</b><br /> <a href="cars.htm" onmouseover='cars.src="images/cars1.jpg"' onmouseout='cars.src="images/cars.jpg"'><img src="images/cars.jpg" name="cars"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Cartoons:</b><br /> <a href="cartoons.htm" onmouseover='cartoons.src="images/cartoons1.jpg"' onmouseout='cartoons.src="images/cartoons.jpg"'><img src="images/cartoons.jpg" name="cartoons"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Celebrities:</b><br /> <a href="celebrity.htm" onmouseover='celebs.src="images/celebs1.jpg"' onmouseout='celebs.src="images/celebs.jpg"'><img src="images/celebs.jpg" name="celebs"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Digital Art & 3D:</b><br /> <a href="digital.htm" onmouseover='digit.src="images/digital1.jpg"' onmouseout='digit.src="images/digital.jpg"'><img src="images/digital.jpg" name="digit"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Fantasy Art:</b><br /> <a href="fantasy.htm" onmouseover='fantas.src="images/fantasy1.jpg"' onmouseout='fantas.src="images/fantasy.jpg"'><img src="images/fantasy.jpg" name="fantas"></a> </td> </tr> <tr valign="middle" align="center"> <td style="border:0;color:#FFDEAD"> <b>Fine Art:</b><br /> <a href="art.htm" onmouseover='art.src="images/art1.jpg"' onmouseout='art.src="images/art.jpg"'><img src="images/art.jpg" name="art"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Holidays:</b><br /> <a href="holidays.htm" onmouseover='holi.src="images/holidays1.jpg"' onmouseout='holi.src="images/holidays.jpg"'><img src="images/holidays.jpg" name="holi"></a> </td> <td style="border:0;color:#FFDEAD"> <b>Natu </b><br /> <a href="nature.htm" onmouseover='natur.src="images/nature1.jpg"' onmouseout='natur.src="images/nature.jpg"'><img src="images/nature.jpg" name="natur"></a> </td> </tr> </table> </td> I'm sorry if i make some mistakes on the post.... hi everyone, I have a small problem. I want to implent the facebook (like), twitter (tweet) and Hyves (respect) buttons on my website. However, I dont like the styles of either one. Because they are using an iFrame, Im not able (or my skills limit me..) to change their looks. So I was thinking about creating an onmouseover event. A picture at first and when onmouseover it changes to the actual button. (IF there is a better way of hiding the button but still keep its functionallity, please tell me) The problem starts when I want to code it. I have no clue what so ever how to get this to work. Perhaps someone here can help me out? Because I have never worked with events in Expression Web 4. Thanks in advance! Ferdri3 PS. Behavior -> swap image (+ editting second img url doesnt work) Im using expression web 4 Is there anyway I can have a line of text in my FAQ's on my website with a onmouseover command to drop down a box with the answer to the question? Thank you in advance, Regards, Josh Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. |
|||||||