|
JavaScript - Onmouseover Image Change
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>
Similar TutorialsHi 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 ??? 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. 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 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, 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 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 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 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. Hello 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. Is it possible to atchually make a javascript that onMouseOver an image expands a seperate image and also works multiple times? say from 1 px wide to 25px wide? It would be a great help if someone could help me with this one. Hi Guys. First off i'd like to say Hi as i'm new to the forums. But am looking forward to spending a lot of time here. I am currently studying Javascript to help create a bit more user interaction with my websites which I use CSS/XHTML and PHP5 to design. Ok with that said I was hoping someone might be able to lend a slight hand. I am trying to create an Image menu for a site I'm working on that is rather simple in essence. When the user hovers over a button I have the menu will move left or right depending. I have not got a great deal into it yet as I have become stuck, as I'm new I figured it would be easier to troubleshoot if I build up the program bit by bit. ----> menupic variable is being passed by php into javascript Code: function moveImagesLeft() {
for (i=0; i<=100; i++) {
setPixels = (i + 2);
for (L=1; L<=menuPic; L++){ /* this loop makes sure that all the pictures move together */
indexpic = "menupic"+L;
document.getElementById(indexpic).style.left="-"+setPixels+"px";
}
}
}
Ok, very simple. I have a DIV container that holds my images and the overflow is hidden, php works out how many images there are and feeds that into javascript. This all works fantastically however it seems that once I reach the bottom of my second for loop Code: document.getElementById(indexpic).style.left="-"+setPixels+"px"; Nothing else happens, the pictures all shift left 2pixels as they should but nothing else. The top loop is not going again (excuse the poor use of terminology) I dont know if it makes a different but where the images are they are declared as so. Code: <a href="#"><img class="menupic" id="menupic1,2,3,4,5 (etc)" src="_image" border="0" height="50" width="60"></a> Code: .menupic {position:relative; display:block; width:60px, height:40px}
and the Id class is there so that my javascript can control it. I hope that I have worded this in a way that is easily understandable. Any help would be greatly appreciated. I try not to ask for too much help because working things out is part of the learning curve but in this instance I have spent a lot of time and not found a solution. Kindest Regards Oli I 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>
this is my script Quote: <a href="javascript:void(0);" onmouseOver="hahaha()"> <img border="0" src="pink.gif" name="Mainpic" id="image"></a> and this is the function Quote: function hahaha() { document.getElementById('image').src="blue.gif"; } the problem is when i mouseover the image look like this why is that? help please! thanks HI, I am not very experienced with javascript and got stuck doing the following. I have placed some image rollovers on one of my pages..where when a user rolls over some text links..and image appropriate to that text is showen...when the mouse moves away from the links then a blank image is displayed as a place holder. this is all simple...here is where i am stuck. The place holder has a specific size...but the rest of the images that are displayed when the text is rolled over have different sizes, some are vertical some are hortizontal. i do not want to have to resize every image so that it properly fits the place holder...add the white borders and so on...so that the image is dispalyed properly. Is there a way to have the size be changed for each image...so that the size doesnt get inherited from the place holder, but so that the script applies the size associated with each individual image. example place holder is 20 x 20 image 1 is 100 x 200 image 2 is 200 x 100 the place holder is loaded...when the mouse moves over the first link...image 1 replaces the place holder...but instead of taking on the size of 20x20 it has to be displayed at its own size of 100 x 200... how can i do this? thank you for all of your help I have an image map with 6 areas. Code: <p class="center"><img src="images/car_feature.png" alt="" usemap="#car"/></p> <map id="car" name="car"> <area shape="rect" coords="172,198,195,222" href="#" alt=""/> <area shape="rect" coords="242,79,266,104" href="#" alt=""/> <area shape="rect" coords="293,124,317,149" href="#" alt=""/> <area shape="rect" coords="407,212,431,227" href="#" alt=""/> <area shape="rect" coords="430,300,453,325" href="#" alt=""/> <area shape="rect" coords="565,346,588,370" href="#" alt=""/> </map> I also have 6 DIVs that are hidden and only a single one will appear visible on mouseover of its corresponding image map area. Code: <div id="hidden"> <div class="feature"> Feature 1 </div> <div class="feature"> Feature 2 </div> <div class="feature"> Feature 3 </div> <div class="feature"> Feature 4 </div> <div class="feature"> Feature 5 </div> <div class="feature"> Feature 6 </div> </div> The roadblock I'm running into is the show function in the JavaScript. Code: window.onload = init;
function init() {
var area = document.getElementById("car").getElementsByTagName("area");
var features = document.getElementById("hidden").getElementsByTagName("div");
hide();
function show() {
for(a=0; a < area.length; a++) {
if(area[a].onmouseover) {
document.getElementById("hidden").getElementsByTagName("div")[a].style.display="block";
}
}
}
function hide() {
for(b=0; b < features.length; b++) {
document.getElementById("hidden").getElementsByTagName("div")[b].style.display="none";
}
}
for(i=0; i < area.length; i++) {
area[i].onmouseover = show;
area[i].onmouseout = hide;
}
}
I'm trying to get it so that if I hover over the first area on the image map, the first hidden DIV will appear, but none of the others. And if I hover over the fourth area, the fourth DIV will appear. I hope this makes sense, and I'd appreciate any and all help towards solving this issue and ending my headache lol Hello all, I'm new to this forum so please forgive me if I make mistakes and feel free to point them out. I'm a beginner when it comes to javascript, but would like to learn. I have been building a website that I would like to put an interactive feature on. This is the code that I currently have: Code: <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_pink.jpg')" onmouseover="scroll_up();"><img class="pinkico" hspace="3" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_pink_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_yellow.jpg')"><img class="yellowico" hspace="4" onMouseOver="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_yellow_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_white.jpg')"><img class="whiteico" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_white_icon.jpg" ></a> I would like to have these images scroll together at the same time in accordance with the mouse movement. So when the mouse is just hovering over one of these images or elsewhere on my page they will stay still, but when the mouse is hovered over the left or the right hand side the images move in that direction? So if the mouse is hovering over to the left side the images will start to slide left and if the mouse is hovering over the right side the images will start to slide right. I have tried to do some research on this for myself but have only been able to locate this web page to explain what I am looking for: Link 1 - The type of effect I'm looking for is demonstrated by their first example, underneath the horizontal scrolling demo header. I have no idea how to achieve this code though and have failed to find any answers that I understand on the website. Adding two little arrow images for the mouseover and mouseout effect to happen would not be a problem, but I do not understand how to go about this. Hope this is ok, Thank you for reading , Nightshade14 So I need to make a circular image map with a rollover state. I have circular buttons that I'm trying to put on my website, which I would like to not only look circular bu to BE circular. Because it just looks lame to hover over a square area and activate a button that's still 30 pixels away. I was digging through the Internets and found this: http://jsfiddle.net/7JJUk/ My idea was to tweak the rollover overlay into being as large as my original image and use the rollover image as the content of the overlay div. After loads of messing around, I finally have come to this: http://jsfiddle.net/7JJUk/248/ I just know i'm on to something, but I don't know anything, really, about Javascript. I've been messing with the tidbits to figure out what controls what, but the issue I can't get past is how the image will flicker like mad (every other pixel in Chrome, sporadically in Firefox 4 whether you move the mouse or not, and only as you pass through it at certain speeds in IE 9) as you hover over it. I have no idea if this is even possible, but if it is, please help me out. If there's a better way to be doing this altogether (without flash), I would absolutely love that. Especially if there's a way to use an image map with the position command in CSS.. Thanks!!! http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. |
|||||||