|
HTML - Rollover Image, Changes A Different Image
Hello there.
I was attemping a rollover, in which a different image (not the one that the mouse hovers over) changes instead. I got this to work, but I then tried to have a number of small images, lets say 5 smaller images, when the mouse rolls over each small image, a large image changes. (1 large image, responding to rollovers of 5 smaller images) This is what I got so far, but I think I short-ciruited the html somewhere. Any suggestions or feedback would be much appreciated. <SCRIPT language="JavaScript"> <!-- if (document.images) { image_off= new Image(250,250); image_off.src="..toothbrush-white.jpg"; image2= new Image(250,250); image2.src="...toothbrush-black.jpg"; image3= new Image(250,250); image3.src="..toothbruch-green.jpg"; image4= new Image(250,250); image4.src="...toothbrush-yellow.jpg"; image5= new Image(250,250); image5.src="..toothbrush-red.jpg"; } function change1(picName,imgName) { if (document.images) { imgOn=eval(imgName + ".src"); document[picName].src= imgOn; } } //--> </SCRIPT> <BODY> <P> <A HREF=" newpage.html" onMouseover="lightup('pic1','image2')" onMouseout="change1('pic1','image_off')"><IMG SRC="..Colour_Buttons/Black.gif" name="pic1" width="20" height="15" border="0"> </A> <A HREF=" newpage.html" onMouseover="lightup('pic1','image3')" onMouseout="change1('pic1','image_off')"><IMG SRC="..Colour_Buttons/Green.gif" name="pic2" width="20" height="15" border="0"> </A> <A HREF=" newpage.html" onMouseover="lightup('pic1','image4')" onMouseout="change1('pic1','image_off')"><IMG SRC="..Colour_Buttons/Yellow.gif" name="pic3" width="20" height="15" border="0"> </A> <A HREF=" newpage.html" onMouseover="lightup('pic1','image5')" onMouseout="change1('pic1','image_off')"><IMG SRC="..Red.gif" name="pic4" width="20" height="15" border="0"> </A> <P> <IMG SRC="..toothbrush-white.jpg" name="pic1" width="250" height="250" border="0"> <BODY> Similar TutorialsSo in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? Hi, if anyone would be able to help me with this issue im having doing an image rollover it would be great. Thank you Hey - I'm in the middle of making a website for our family villa, and was wanting to put on a picture of the floor plan. I thought it'd be a good idea if when you mouse over a room, a big picture of the room shows up - kind of like an image map, only you wouldn't on the room, and the photo would show up over the floor plan (if that makes sense!) Can anyone tell me how to do this please? Thanks!! on my 'past layouts' section i did a rollover image for each one but the hand cursor shows when you move the mouse over the image, how do i do it so it's just changes pics without changing cursors? is there some way so that i can have the rollover image appear anywhere on the page instead right over the original image?? please help thanks! Is it possible to have an image, that when rolled over changes, and have the changed-rollover image be an image map...without using any java? I know how to do various image rollovers (both with one image that "moves" and two that switch) and I know how to make an image map. I just don't know how to combine them into one thing. Is it possible, and if so, how would I do it? Thanks! Hello I'm a very amateur html coder and up until half a year ago I've been using tables as a way to setup my layout. Fortunately I came across a downloaded template that had no tables and I ventured into finding out how this person accomplished this. Six months later I'm a little bit more familiar with styling sheets working along with html pages. I have made a couple of test webpages that turned out quite successfully so I agreed to helping out my friend's small gaming community by making them a small homepage. I decided to make a little "coming soon" page so I can test out login forms (yes I am that much of a noob). I added a couple of links to help promote the free webhosts im using along with a link to the forums that they setup before my friend contacted me. I wanted to add a rollover effect with the images using stylesheet. I read a couple of tutorials and understood the basic concept of using the anchors' hover feature to change the background. While still having the webpage on my computer it worked just fine.. the images lit up the way I wanted them to when I hovered my mouse over them. Later, after uploading the webpage to the webhost I noticed that only when you first hover your mouse over the images they disappear for a couple of seconds, come back and then they function properly. Did I do something wrong here.. I followed several tutorials and kind of pieced together the puzzle... Sponsor One and Two: HTML Code: <div id="left"> <ul> <li><a class="hosting-logo" href="http://www.000webhost.com">Hosting provided by: 000webhost</a></li> <li><a class="dot-tk_logo" href="http://my.dot.tk">Redirecting provided by: my.dot.tk</a></li> </ul> </div> Register Image: HTML Code: <a class="register-forum" href="http://analogknights.forum-motion.com/profile.forum?mode=register">Register for the Forums</a> My CSS HTML Code: #middle {
width:300px;
margin-left:15px;
}
a.forum-signup:link {
background-image:url(../images/join_forums.gif);
width:300px;
height:63px;
text-indent: -999em;
display:block;
text-decoration:none;
}
a.forum-signup:hover {
background-image:url(../images/join_forums_over.gif);
}
a.register-forum:link {
background-image:url(../images/register_forums.gif);
width:300px;
height:63px;
text-indent: -999em;
display:block;
text-decoration:none;
}
a.register-forum:hover {
background-image:url(../images/register_forums_over.gif);
}
There is more to the code but I only pasted what I thought was relevant to the problem. Thanks in advance! EDIT: Oh and I forgot the page: Link Here ** validation and everything is all wrong (hopefully I'll learn all that next semester during my first ever web-design class) ** I'm pretty average with HTML or any web design style at all so please bear with me. I am the club's web coordinator, all I do is simple things such as update the site with events and any announcements. One thing I would like to add is our picture; however, I have our names as a link to our email, I was wondering if I could also use that same Text/Link and when they rollover it, it'll show our picture so that students who visit our site can know who we are if they don't already. I've seen this done a couple times, but I'm not sure how to make it myself. Any help is appreciated, thanks. I am looking for an easy code that when applied will resize an image link. I am trying to get around code that swaps one image for another on mouseover. I just want one image that will be resized on mouseover. I know this won't work, but something like: onMouseOver= width="180" height="180" with the original swap image being: width="190" height="190" Thanks for the help and for not slamming me for my ignorance! Peace. Need some help. I had some images in my document and I added rollover images to them. I had one of my images on the left and text to the right and the text was level with the top of the image. Once I changed my single image to the rollover image my text dropped to the bottom and is now begins one row up from the bottom of what is now a rollover image. I haven't been able to figure out why adding the rollover changed the positioning, it looked fine when it was a single image. This is what my line looked like before the rollover: HTML Code: <p class="paragraph_text"><span class="paragraph_text"> <img src="assets/photos/inside.JPG" alt="Inside" name="inside_left" width="200" height="150" align="left" id="inside_left" />We know that each of o after adding the rollover my html now looks like this: HTML Code: <p class="paragraph_text"><span class="paragraph_text">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','assets/photos/longwallacc.JPG',1)"><img src="assets/photos/inside.JPG" alt="pumps & accessorries" name="Image13" width="200" height="150" border="0" id="Image13" /></a>We know that each
This is what my style looked like for the image when it was without the rollover: HTML Code: #inside_left {
clear: none;
float: left;
padding-right: 5px;
border: thin solid #006;
vertical-align: top;
}
I tried creating a new style for the rollover image itself keeping the same styles as I had for the single image but it still has no effect? Any recommedations would be appreciated. I'm a total beginner when it comes to HTML. I was given some code to use for my fading rollover image which worked great but when I went to add another rollover image in my HTML doc the second did not function. I know something must be added to the <head> portion of the code in order for the new rollover to work but I can't seem to figure out what it is. My site is www.sailormoonthemovie.com/test.html. Thank you so much for your time and help! Any suggestions are much appreciated I've been helping a friend of mine build a website for a local group of guys that do stunt shows on motorcycles. We've got the page done for the most part, just need some tweeking here and there on most of the pages. I have a question though about the front page we've got set up. Here's a LINK. The four GIF rollover images are really turning into a problem. The only way I could figure out how to place them and have them overlapping each other was by using a Position Absolute tag. That however is causing problems depending on the end user's screen resolution, or if they've got a favorites bar or whatever docked on the browser screen. Would be HIGHLY greatful if someone could point me in the right direction of what I can do to get these images placed inside of the table, while being able to overlap them, and NOT having to deal with absolute positioning. Thanks VERY much in advance for any help! I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! HTML Code: <a href=http://www.ninjahelper.kk5.org onMouseOver= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/on7.png';" onMouseOut= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png';"><img src="http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png" name=off7 border=0></a><..copyright muizyusuff.securegamesstudio.t83.net all rights reserved..!> TRY THIS CODE OUT AND TELL ME WHAT YOU THINK. IT WAS MADE BY ME AND ALSO SITE. DON'T MIND THE LINK. CHANGE IT IF YOU WANT. IT WOULDN'T WORK WITHOUT A LINK. SYYR. NEED HELP WITH THIS, TELL ME. P.S IF YOU DON'T HAVE A HTML EDITOR, YOU CAN USE ONE ONLINE AT http://www.onlinehtmleditor.net/. BYE. _________________________________________________________________ hi, i have a page with a navigation down the side. i thought it would look better with a rollover on each button. i have just made a black version for the rollover and they all work apart from 1!! i wondered if any1 can spot the mistake because i cant for the life of me see it. my page is greenleaflandscapes.info and the 'location' button is the one thats not woorking. its fine in ie but FF its not!! thanks in advance oh and dont take the mick its my first website I have an ecommerce website and I want to show 1 big product image, along with a number of thumbnails. I then want the customer to be able to hover over or click the thumbnails and have the thumbnail become the 'big' image. What's the 'most compatible' way of doing this? I don't really want to go with some fancy scripted solution just to find out that half my customers can't see it because their firewall/AV/popup software etc is stopping it... I'm hoping for some help with the code to solve my problem. My site has a page devoted to a series of products. I have the names of the products running down a set of cells on the left side of a table. The product names will be linked to html pages dedicated to each of those products. I've got that under control, no problem. I'm trying to add the extra spiff of a common image area in a large merged cell just the to the right of the navigation cells and I'd like for an image of the specific product to come up in the image area when a user mouses-over the navigation cell. For example, the first nav cell is for "Lathes," so when a user mouses over the word Lathes I want a picture of a lathe to appear in the image area. When they mouse over the nav for bandsaws, I want an image of a bandsaw to come up in the same image area, etc. Is anyone willing to suggest some code to accomplish this little trick? It would be a great help. Thanks. Hello, this may sound like a dumb question: Is there a way build a button that on rollover makes an image appear beside it? thanks Ok, I have made a main page which is basically an image rollover. The rollover reveals text which is just part of the image. I want to make this text into links. I can't seem to be able to edit the rollover image in Dreamweaver. I tried placing an area map on the original image but that doesn't work. Any suggestions? Thanks muchly! |
|||||||