|
JavaScript - Get The Value Of Title Of <td> Onmouseover Function
hi.
how can i get the value of title of<td> on onmouseover function. something like that. Code: <td title="mytitle" onMouseOver="func(this.title);"></td> can i do this. plzzzz help me Similar TutorialsI have six small images. Depending on which image a user hovers over, I would like a seventh image (a simple box) to change as well. For example, if a user hovers over image1, I want the seventh image to be a red box. If a user hovers over image2, the seventh image should be a blue box. Simple huh? So the seventh image changes color based on which of the six smaller images the user hovers over. ------------- So far, my current code only allows me to hover over any of the six images, and the seventh image always changes to the same image color. Code is below. Any help would be appreciated. Code:
<script type="text/javascript">
function hoverBox() {
var boxNumber;
document.getElementById("info").src = "Images/infoRedColor.png";
}
function hoverBoxOut() {
document.getElementById('info').src = "Images/info.png;"
}
</script>
</head>
<body>
<div id="wrapper">
<a href=""> <img class="box1" src="Images/box1.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box1.png'; hoverBoxOut()" ></a>
<a href=""> <img class="box2" src="Images/box2.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box2.png'; hoverBoxOut()"></a>
<a href=""> <img class="box3" src="Images/box3.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box3.png'; hoverBoxOut()"></a>
<a href=""> <img class="box4" src="Images/box4.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box4.png'; hoverBoxOut()"></a>
<a href=""> <img class="box5" src="Images/box5.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box5.png'; hoverBoxOut()"></a>
<a href=""> <img class="box6" src="Images/box6.png" border="0" onmouseover="this.src='Images/box1hov.png'; hoverBox()"
onmouseout="this.src='Images/box6.png'; hoverBoxOut()"></a>
<!-- Seventh Image -->
<img id="info" src="Images/info.png" border="0">
</div>
</body>
Is it possible to set onmouseover only in js file without running the function on html code? P.S. I found a coding thread here but I don't understand it and it's too old (2005 archive). Thank you very much Hi, I hope someone can help me figure this out - it's been bugging me for a whole day now, and I can't seem to figure it out, and so far no Google research found this exact problem for me... Situation: I have a simple HTML page with one DIV element with the id "rotator". Inside that, JavaScript is supposed to create boxes that react to mouseovers. The weird thing is: The whole script works, but ONLY on the LAST box I create, no matter what I do. I can manually add the mouseover code to any one of these boxes, but it will only take on the last one. I can have JavaScript tell me the mouseover status of each box, and they all tell me they have code assigned correctly - but again only the last one works... Here's the relevant code (yes, highly abbreviated, but it's the part that fails on me): Code: var maxBoxes = 10;
function initSite() {
var rotator = document.getElementById("rotator");
rotator.innerHTML = "";
for (x = 0; x < maxBoxes; x++) {
rotator.innerHTML +='<div id="myBox' + x + '"></div><div id="myDark' + x + '"></div>';
// various other stuff about myBoxes[x] also in here, but not relevant to the issue I think
applyMouseActions(document.getElementById("myDark" + x);
debugOutput(document.getElementById("myDark" + x).id+"=" + document.getElementById("myDark" + x).onmouseover + "<br>", 1);
}
}
function applyMouseActions(item) {
if (!item) return;
item.onmouseover = function(ev) {
alert("does this work?");
var thisNum = this.id;
thisNum = thisNum.charAt(this.id.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#fff";
}
item.onmouseout = function(ev) {
var thisNum = this.id;
thisNum = thisNum.charAt(thisNum.length-1);
var tempBox = myBoxes[thisNum].boxOb;
tempBox.style.background = "#aaa";
}
}
initSite is called in the body onload. All kinds of other animation parts are implemented that work fine, just this mouseover won't work. I have tried re-writing it in multiple different ways, including "xyz.onmouseover = myMouseCode" and then defining the function separately later - still no dice. So, the code creates 10 boxes (0-9) and 10 boxes that are on top of them to create a form of shadow effect depending on the position of the original boxes. Since the "myDark" boxes are on top of the "myBox" boxes, I apply the onmouseover onto the "myDark" boxes, but it only works on "myDark9" and no other box. They are all created the same way, the mouseover assigned the same way... All I can do is shake my head at it, but that doesn't fix the issue, obviously ;-) Any idea what else I can try? Thanks! JavaScript Code: window.addEvent('domready',function(){
//SAMPLE 8
var handles8_more = $$('#handles8_more span');
var nS8 = new noobSlide({
box: $('box8'),
interval: 5000,
autoPlay: true,
items: $$('#box8 h3'),
size: 900,
handles: $$('#handles8 span'),
handle_event: 'mouseenter',
addButtons: {
previous: $('prev8'),
play: $('play8'),
stop: $('stop8'),
playback: $('playback8'),
next: $('next8')
},
onWalk: function(currentItem,currentHandle){
//style for handles
$$(this.handles,handles8_more).removeClass('active');
$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
//text for "previous" and "next" default buttons
$('prev8').set('html','<< '+this.items[this.previousIndex].innerHTML);
$('next8').set('html',this.items[this.nextIndex].innerHTML+' >>');
}
});
//walk to item 0 witouth fx
nS8.walk(0,false,true);
});
html Code: <div class="slider sample8"> <p class="buttons" id="handles8"> <span>Item 1</span><span>Item 2</span><span>Item 3</span><span>Item 4</span><span>Item 5</span> </p> <div class="mask1"> <div id="box8"> <div onMouseOver="nS8.Stop();" onMouseOut="nS8.Play();"> </div> </div> </div> <p class="buttons"> <span id="prev8"><< Previous</span> | <span id="next8">Next >></span> </p> <p class="buttons"> <span id="playback8">< Playback</span> <span id="stop8">Stop</span> <span id="play8">Play ></span> </p> </div> All I need to do is when they hover ocer the div statement stop the program from looping. and then when they stop hovering over it let it start looping again. Hey all, I have a little function that performs when a form item is selected. I would like to give the form items all at once and have the function perform when the user mouses over an item in the displayed list. Here is the form code: Code: <form> <select onchange="showRSS(this.value)"> <option value="">Select an RSS-feed:</option> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> thanks a bunch, Brian p.s. I tried this but it didn't work Code: <?php echo("<a href=\"http://www.msn.com\" onMouseover=\"showRSS(this.MSNBC)\">MSNBC News</a>");?>
<br />
<?php echo("<a href=\"http://www.google.com\" onMouseover=\"showRSS(this.Google)\">Google News</a>");?>
<br />
How to I use the tipsy (http://onehackoranother.com/projects/jquery/tipsy/) to read from the title tag in the Code: <a href="#", title="Hello<br>World">Hello World</a> From what I can do is to use the tipsy code: Code: $('#example-html').tipsy({html: true });
The final code which I wish to create may look something like the following: Code: for (var i=0; i<10; i++){
document.write("<a href='#', title='Hello<br>" + i + "' class='example-html'> Hello " + i + "</a>");
}
Appreciate any help offer This page: http://homepage.ntlworld.com/kayseyc...document2.html seems to indicate that it's possible, but it looks like it also pops up an alert window which would be annoying as hell. Is there a way to, say, once every minute change the title bar text? You see I have a text file of rotating slogans that appear each time you reload a page on my site and someone suggested that having them change even when the page is already open might be fun. I thought I'd look into it and see if it's possible. The site is http://opalcat.com. I don't know enough about javascript to know if this is possible. I am fairly good at implementing and installing other people's code, though, and can usually make minor changes to tweak things. Please let me know if this is a doable thing, and if so, if you'd be willing to help me work it out. Thanks in advance, OpalCat I am looking to use a similar method as facebook chat does, where it alternates between the original title text and 'friendsName has sent you a message!...' how can I do this ? Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript">
function do_something(e)
{
document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat";
}
</script>
and it works with this Code: <div id="flash">
<div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?
Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help? Code: /* <![CDATA[ */
document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);}
function slideRecord(disc)
{
var record = "disc"+disc;
var y = 20;
document.getElementById(record).style.top = y + 'px';
}
function unSlideRecord(disc)
{
record = "disc"+disc;
var y = 0;
document.getElementById(record).style.top = y + 'px';
}
/* ]]> */
Hi I have a script that runs fine in FF, Chrome But in IE it does not work at all...(mouse over/mouseout) Would you please help me fix the problem... here is the code: Code: <script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
window.onmouseout=doTimer;
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
function descriptionKeyUp() {
if (timer === null) {
startTimer();
}
else {
clearTimeout(timestop);
}
timestop = setTimeout(stopTimer, 6000);
}
</script>
-----------------------
<form>
<textarea name="taskdesc" id="taskdesc" cols="45" rows="5"onmouseover="stopCount()" onkeyup="descriptionKeyUp()"></textarea>
<p>Time Spent on Other tasks:
<input type="text" name ="txt" id="txt" />
</p>
<p>Time Spent on Documenting:
<input type="input" name="seconds" id="timer" />
</form>
basically what it does is when user takes the mouse away from the form it counts the time...when user put the cursor in side the form...it stops counting...... Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')">
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>
<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')">
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>
<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')">
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>
<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')">
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>
<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>
<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>
<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>
<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>
</div>
Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. 2 onmouseover conflict. i cant click menu1-jQuery. can someone help me out. 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">
<head>
<title>灰色CSS+Js实现的下拉菜单代码- www.webdm.cn</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="JavaScript" type="text/javascript">
function $(id){
return document.getElementById(id);
}
function menu_my(name,num) {
var my;
my = $(name);
if ( my.last == undefined ) {
my.last = 1;
}
var Menu = $("Menu" + name + my.last);
var Cont = $("Cont" + name + my.last);
Menu.className = "";
Cont.style.display = "none";
var Menu = $("Menu" + name + num);
var Cont = $("Cont" + name + num);
Menu.className = "selectd";
Cont.style.display = "block";
my.last = num;
}
</script>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<style type="text/css">
body{
text-align: center;
font-size:12px;
}
#popimg{
WIDTH:770px;
margin:0 auto;
text-align:center;
}
#popimg2{
WIDTH:770px;
margin:0 auto;
text-align:center;
z-index:-1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
position:relative;
float: left;
width: 110px;
}
li ul {
position:absolute;
display: none;
top: 20px;left:0;
}
li:hover ul, li.over ul {
display: block;
}
ul li a{
display:block;
font-size:12px;
border: 1px solid #ccc;
padding:3px;
margin-right:1px;
text-decoration: none;
color: #777;background:#eee;
}
ul li a:hover{
background-color:#f4f4f4;
}
#test{
clear:both;
background-color:#999999;
width:769px;
height:100px;
margin:0 auto;
}
.menu0307 {
OVERFLOW: hidden; ZOOM: 1; HEIGHT: 28px
}
.menu0307 SPAN {
BACKGROUND: url(http://upload.ouliu.net/g/ad2da94515010b2c275a9b4958441e20.png) no-repeat -1000px 0px; FLOAT: left; OVERFLOW: hidden; WIDTH: 125px; LINE-HEIGHT: 300px; HEIGHT: 28px
}
.menu0307 SPAN#Menuxuehua1 {
BACKGROUND-POSITION: 0px 0px
}
.menu0307 SPAN#Menuxuehua2 {
BACKGROUND-POSITION: -125px 0px; WIDTH: 124px
}
.menu0307 SPAN.selectd#Menuxuehua1 {
BACKGROUND-POSITION: 0px -32px
}
.menu0307 SPAN.selectd#Menuxuehua2 {
BACKGROUND-POSITION: -125px -32px
}
</style>
</head>
<body>
<div id="popimg">
<ul id="nav">
<li><a href="">menu1</a>
<ul>
<li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li>
</ul>
</li>
<li><a href="">menu2</a>
<ul>
<li><a href="/">test1</a></li><li><a href="/">test2</a></li><li><a href="/">test3</a></li>
</ul>
</li>
<li><a href="">Ajax</a>
<ul>
<li><a href="/">CSS</a></li><li><a href="/">HTML</a></li><li><a href="/">editor</a></li>
</ul>
</li>
<li><a href="">menu3</a>
<ul>
<li><a href="/">media</a></li><li><a href="/">object</a></li><li><a href="/">graphic</a></li>
</ul>
</li>
<li><a href="">menu4</a>
<ul>
<li><a href="/">Ajax/JavaScript</a></li><li><a href="/">ExtJS</a></li><li><a href="/">jQuery</a></li>
</ul>
</li>
<li><a href="">menu5</a>
<ul>
<li><a href="/">game</a></li><li><a href="/">programming</a></li><li><a href="/">sale</a></li>
</ul>
</li>
<li><a href="">VC++</a>
<ul><li><a href="/">database</a></li><li><a href="/">oracle</a></li><li><a href="/">sql</a></li>
</ul>
</li>
</ul>
</div>
<div id="popimg2">
<div id="test">
<DIV class=menu0307 id=xuehua>
<SPAN class=selectd id=Menuxuehua1 onmouseover="menu_my('xuehua',1)" ;>meeting</SPAN>
<SPAN id=Menuxuehua2 onmouseover="menu_my('xuehua',2)" ;>note</SPAN>
</DIV>
<DIV id=Contxuehua1 style="POSITION: relative">test</DIV>
<DIV id=Contxuehua2 style="DISPLAY: none">database</DIV>
</div>
</div>
</body>
</html>
Hi, I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not, and figured JS should be able to take care of it. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great! What i would like to do seems rather simple: I have a calendar. I would it to do one of two things: 1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))). 2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar. While fiddling with it this afternoon i figured i was close, but i am missing something... Code: <td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>
But this seems to be pulling information from an element whose id = 27...which is not what i'd like.. Thanks in advance, Tsiqueira Ok, I'm new to these form and I need help with an assignment. Hopefully I'm within the rules here as I most certainly don't want to get stung for plagiarism or cheating. But, here is my issue. I'm struggling with javascript and I can't manage to get this rollover effect working. The HTML side of things should be ok and it's probably a missing semicolon. Code: /* write functions that define the action for each event */
function showTip () {
var sidTip;
/* obtain access to the HTML tool tip element using id "sidTip" and link it a varialbe named sidTip */
sidTip = document.getElementById("sidTip");
/* display the HTML tool tip element sidTip bying change the value of its CSS property "display" to "inline" */
sidTip.style.display("inline");
}
function hideTip () {
/* this function hides the tool tip */
var = sidTip;
/*first, get access to the tool tip HTML element */
sidTip = document.getElementById("sidTip")
/* then, hide the tool tip HTML element by changing its CSS property "display" to "none" */
sidTip.style.display("none");
}
function init () {
alert("javascript working");
/* the init function links functions to appropriate events of corresponding HTML elements */
/* create a variable named sid */
var = sid;
/* get access to the HTML element by its id "sid" and link it to sid */
sid = document.getElementById("sid");
/* link function showTip to the onmouseover event of sid */
onMouseOver = showTip;
/* link function hideTip to the onmouseout event of sid */
onMouseOut = hideTip;
}
/* link function init to the onload event of the window so that function init will be called when the page is loaded */
window.onload = init;
/* another random comment belonging to hebdomad */
I have a img tag but I also added <img src="panada.jpg" onmouseover="alert('$info')"> can you tell me what I'm doing wrong?
I have a dropdown list working, but I want the dropdown list to be initiated when the mouse goes over the first link in the list. Once it is visible, I want it to remain visible so long as the mouse is over any of the links. Right now I have it working for being visible only when the mouse is over the first link, but it does not remain visible moving the mouse over the first link, down the drop down menu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <style type="text/css"> div.ff { border:2px solid white; display:none; width:200px; background-color:red; margin-top:5px; } a { width: 200px; text-align:center; background-color:red; color:white; font-size:16px; display:block; } </style> <script type="text/javascript"> function ab(a) { document.getElementById(a).style.display="block"; document.getElementById(a).parentNode.onmouseover="ab(a)"; document.getElementById(a).parentNode.onmouseout="ab1(a)"; } function ab1(a) { document.getElementById(a).style.display="none"; } </script> </head> <body style="background-color:black;"> <div> <a href="kkjklj.com" onmouseover="ab('dg')" onmouseout="ab1('dg')">kjlj</a> <div id="dg" class="ff"> <a href="kjlj.com">lkjefee</a> <a href="ehfueh.com">fheufheuih</a> </div> </div> </body> </html> Hi all, This is my first post, Self Learned new programmer here :o) Here's what I am having problem with: 1) OnMouseOver is working well on Chrome, but does not do anything on IE. What am I doing wrong? 2) I want to put sound on OnMouseOver. I tried using different examples, but no luck. Can you help me with the code? Here's the full code just in case: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Nov 19 23:13:18 GMT-0500 (Eastern Standard Time) 2010-->
<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appVersion.indexOf("2.") != -1){
check = false;
}
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
check = false;
}
else {
check = true;
}
image1= new Image();
image1.src = "img/index_r8_c4.gif";
image1on = new Image();
image1on.src = "img/index_r8_c4_RED.gif";
image2= new Image();
image2.src = "img/index_r4_c14.gif";
image2on = new Image();
image2on.src = "img/index_r4_c14_RED.gif";
function imageon(name) {
document[name].src = eval(name + "on.src");
}
function imageoff(name) {
document[name].src = eval(name + ".src");
}
function on(name) {
if (check == true){
imageon(name);
}
}
function off(name) {
if (check == true){
imageoff(name);
}
}
// -->
</script>
</head>
<body background="img/background.jpg">
<table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
<!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
<tr>
<td><a href="OurPastWork.htm" onmouseover="on('image1');" onmouseout="off('image1')">
<img name="image1" src="img/index_r8_c4.gif" width="279" height="45" border="0" id="index_r8_c4" alt="" /></a></td>
<td><a href="OurExperience.htm" onmouseover="on('image2');" onmouseout="off('image2')">
<img name="image2" src="img/index_r4_c14.gif" width="186" height="50" border="0" id="index_r4_c14" alt="" /></a></td>
</tr>
</table>
</body>
</html>
Thanks in advance hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using: Code: <-- THIS IS IN CSS file -->
div.test{
position:relative;
font-family:Arial;
font-size: 12px;
padding-left: 82px;
padding-top: 47px;
width: 162px;
padding-bottom: 15px;
cursor:pointer;
cursor:hand;
}
div.test a{
color:#000;
text-decoration: none;
}
div.test a:hover{
color:#4E6D00;
text-decoration: none;
}
<-- THIS IS IN HTML file -->
<div onClick="document.location='otherpage.html';" class="test">
<a href="otherpage.html">here is all content,This is content hyperlinked</a>
</div>
you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please |
|||||||