|
JavaScript - Change Color With Onmouseover A Hotspot
Hi
not really used to java but have an image map with about 90 hotspots. All i want to do is simply change the color of a hotspot when the mouse rolls over. I have really only been able to find solutions for introducing images on mouse over. Any help appreciated thanks Similar TutorialsHello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. Here is my code,but it not what i want. I want only the link to change color or image on mouseover. Code: <html> <body> <a href="http://www.mobile2user.com/" onmouseover="document.bgColor='#EEFFFF'">Change the background color and bring up an alert box</a> </body> </html> Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm 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 Hi everyone. Can anyone help me , i need to make a onmouseover function , when u go with mouse on the left small image it automatically opens the large image in the right, can anyone help me with this ??? i am trying to use the most simple code i can to onmouseover of some text change 1 image. it will have multiple texts with different images for each one all displayed in one place. it seems to work well for me in IE, but on firefox the mouseover doesn't work. and on a mac it doesn't work in safari or firefox. any input is appreciated... here is the shortest version of the code i could put together. Code: <head>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function roll(img_name1, img_src1)
{
document[img_name1].src = img_src1;
}
//-->
</SCRIPT>
</head>
<body>
<a href="2_17_10/index.html" onmouseover="roll('poster','2_17_10/IMG_7075b.jpg')">2-17-10</a>
<img src="2_16_10/IMG_7072.jpg" name="poster" width=500></img>
</body>
</html>
Hey, I currently have my menu on a web page set out using the following method: Code: <div class="linkbox" onmouseover="this.className='linkbox2'" onmouseout="this.className='linkbox'" onclick="location.href='http://www.upthegame.net/';"> General Chat </div> I was wondering if there was a way using javascript to set ALL <div>'s with the class name "linkbox" to change to the class name "linkbox2" onmouseover and return to "linkbox" onmouseout. I would like this to be in a seperate file, I'm guessing this would probably be within an onload function or something along those lines. I'm only familiar with basic JS so please go easy on me Any help is much appreciated. Thanks, Tom. hi all, I really need help with this topic. I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work. I will appreciate your help and understanding. Thanks a lot! here is part of my code.. var frame=new Array(6); frame[0]="page1.html"; frame[1]="page2.html"; frame[2]="page3.html"; frame[3]="page4.html"; frame[4]="page5.html"; frame[5]="page6.html"; var j=0; function nextFrame() { if (j < 5) { j++; document.getElementById(frame).contentDocument=frame[j]; } return; } <span onMouseOver="nextFrame()" > <img name="upperImage" src="something.jpg" width=350 height=250 /></span> <iframe id="frame1" name="frame1" src="" width=350 height=250 frameborder="0"> </iframe> Please let me know if at least I'm in the right track. Thanks Hi, what I want to do is create a menu with rollover buttons but each button also changes the background image of a div. I've managed to change the colour of the div but not add an image there. I've added my code so you can have a look. Case 0 shows me attempting to change the background image. I must be doing something wrong. I've left the other cases as colours so you can see how I did that. I eventually want it all to be images. I'm creating a Joomla website (not sure if that makes a difference). Code: <body onload="addHandlers()">
<script type="text/javascript" language="javascript">
function addHandlers(){
var allMenus = document.getElementById("services_menu").getElementsByTagName("li");
for(var k = 0; k < allMenus.length; k++)
{
allMenus[k].setAttribute('onmouseover', 'ChangeContentBg('+ k + ')' );
allMenus[k].setAttribute('onmouseout', 'Reset()');
}
}
</script>
<script type="text/javascript">
function ChangeContentBg(i)
{
var Num = parseInt(i);
var ContentDiv = document.getElementById("content");
switch(Num)
{
case 0:
ContentDiv.style.background-image = 'url(../images/waxingtinting_rollover_image.jpg)';
break;
case 1:
ContentDiv.style.backgroundColor = 'red';
break ;
case 2:
ContentDiv.style.backgroundColor = 'purple';
break ;
case 3:
ContentDiv.style.backgroundColor = 'green';
break ;
case 4:
ContentDiv.style.backgroundColor = 'yellow';
break ;
/*For each new color you would have to add a new case and change ChangeContentBg() parameter , to the case you want in <li> tag*/
}
}
function Reset()
{
document.getElementById("content").style.backgroundColor = '';
}
</script>
Hi, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works: Code: <A HREF="http://www.cnn.com" onMouseOver="document.pic1.src='menu1on.gif'" onMouseOut="document.pic1.src='menu1off.gif'"> <IMG SRC="menu1off.gif" BORDER=0 NAME="pic1"> </a> The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site: Code: <a href="development.html"> <img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br /> <a href="exhibitions.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="careers.html"> <A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br /> <a href="contactus.html"> <img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td> <td colspan="2" style="height: 148px"> </td> <td style="width: 148px; height: 148px"> Any ideas? I hope the code displays ok on your screen. Hi guys, I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category. So lets say I have a menu that looks like this: Code: <img src="notactiveimagemenu1.jpg" alt=""> <ul id="menu1"> <li>link</li> <li>link</li> <li>link</li> </ul> <img src="notactiveimagemenu2.jpg" alt=""> <ul id="menu2"> <li>link</li> <li>link</li> <li>link</li> </ul> Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active. I was hoping to do this with some javascript. Code: // i was thinking about something like this: // first put menu items in a array // then use document.getElementById(id).onmouseover = function() // and make some sort of check to see which src should be changed. Now I really have no clue how to do it. So if anyone knows a cool solution please let me know. I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that. Anyway thanks for any tips. Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript. I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/ to sort tables by the header. my problem is I want to add to this that everyother row should have a gray background. I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script? For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? I have a number var number = 1,235.326232 I need to display it like following with the last 4 numbers in red. 1,235.32 6232 I have tried number.slice(0,-4)+"<font color='red'>"+number.substr(number.length-5,4); however it keeps messing up the comma and decimal placement. Clearly I'm doing something wrong. Here's my external javascript: Code: document.getElementById('maincontent').style.backgroundColor = "#660000";
Here's my external CSS Code: #maincontent {
background-color: #999;
}
Here's my HTML: Code: <div id="container">
<div id="maincontent">
<p>blah blah blah</p>
</div>
</div>
Nothing happens. What am I doing wrong? Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! Still need assistance, thanks Okay, so here's an example code of what I'm needing: Code: <html>
<head>
<title></title>
<style type="text/css">
#greenrow {
background-color:#090;
}
#redrow {
background-color:#F00;
}
</style>
<script type="text/javascript">
if (calculate.level.value >= calculate.getElementById('shrimp').value){
class = greenrow;
}
else {
class = redrow;
}
</script>
</head>
<body>
<form name="calculate">
<table>
<tr>
<td><label>
Level<input name="level" type="text" size="5" /></label>
</td>
</tr>
<tr id="shrimp">
<td>Shrimp</td>
<td align="center"><label>
<input type="text" name="shrimp" />
</label></td>
<td colspan="3" align="left">10</td>
</tr>
</table>
</form>
</body>
</html>
Okay so what I want to be done is to get information from the input text area "level" and IF "level" is >= 10...for this one certain row, I want it to get the class #greenrow. Else, class = #redrow. Thanks Can this be done? Change background color a row of depending on cell data on that row. e.g Items <table border="1"> <tr> <td><b>Cost</b></td> <td><b>Item</b></td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>34</td> <td>socks</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>12</td> <td>hats</td> </tr> <tr> <td>24</td> <td>gloves</td> </tr> </table> Any pointers in the right direction please I want the font color in the div to change color onclick and change back when clicked again. Tjis works only in IE but other browsers like FF and safari it changes color on click but does not change color back. I need it to work across. Please advise! <div onclick="if(this.style.color=='#666666') this.style.color='#005dab'; else this.style.color='#666666';" class="question">Your question goes here..</div> here is my problem i need to set the color of a text here is what i need to change Code: <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;"> <font color="lightgreen" size="6"><b>* Mileage *</b></font><b> <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b> <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Engine size *</b></font><b> <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b> <font color="lightgreen" size="6"><b>* Body style *</b></font><b> <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b> </div> now i need to set the color from a text file server side so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml . now i would like to store the color in a text file color.txt i can make the code to change the txt file myself inside the color.txt would be "lightgreen" or other color how would i go about this. so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html |
|||||||