|
HTML - Html For Rollover Button Effect
I am not an HTML expert. The design program I inherited has a CSS assigned to a "Learn More" button that reads as follows:
Code:
#slideshow .learn_more { position: relative; background: url(/graphics/btn-learn_more.png) no-repeat; display: block; height: 27px; text-indent: -9999px; width: 123px; z-index: 2; }
#slideshow .learn_mo hover { background-position: 0 -27px; }
As far as I can tell, it seems what that is doing is showing the top 27 pixels of a built-in "Learn More" graphic, and when you hover over it, it shows the bottom 27 pixels and gives the illusion of a rollover. My question is, what direct HTML code could I assign to a graphic to duplicate that effect so I can customize my own buttons? For instance, let's say I want the below graphic (which is 242x54, named button.jpg) to link to google.com. What code would I use to create the hover effect I described above? Similar TutorialsHi everyone, I know how to create a rollover effect with an image... but I believe there is a way to change the rollover color and also changing the color of past paged visited.. so lets say we make an href Quote: <td width="100%" bgcolor="#669999" align="center" height="63" style="border: 2 outset #FFFFFF" bordercolor="#000000"><b><font face="Arial" size="4"><a href="../Projects.htm">Projects</a></font></b></td> is there a way to change the color with a rollover, or maybe add a shadow... i am really rusty with my HTML thank you so much in advance Mel 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? I know how to do a rollover evect with js but I was wondering if it is possible to do with css. Thanks for any help you can give me! I need to add sound to a rollover button. I have downloaded the sound file(.wav) that I want and have in my project's folder. When I check the Dreamweaver help section it says to link to the sound; problem is I also need to link to a page when the button is clicked. How do I acheive this? I am using Dreamweaver 8. I appreciate all help offered. Thanks, Tazmania 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 hey not too sure if I am overlooking something but i have my rollover buttons set up fine and they are working but whenever I click on them(my browser is google chrome), they produce a black rectangle just underneath, they also jump a bit when clicked. the site page is www.spaseafoods.com/Untitled-1.html and you will see the link buttons there, here is the code for the buttons; <a href="Untitled-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/cooltext446156370MouseOver.png',1)"><img src="/cooltext446156370.png" name="Image7" width="87" height="39" border="0" id="Image7" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/cooltext446156370.png',1)"></a> How to make a image rollover based menu that changes image on mouse rollover and on mouse click so when I click the image it stays changed until I click on another image in the menu. I have an image file I want to put this on my webpage but the image should look like Is this some kind of a border applied to the image? How can I achieve this in HTML? 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 again guys, I have a new problem this time! On this page on my website: http://www.modular9.co.uk/artists.html I have it that when you rollover a link it changes from the artist's name to the collective name and back again. Obviously this causes a few problems such as the length of 'modular9' is shorter than most names so because they jump up a line when it is rolled-over the whole script freaks out and you get a mess. I was just wondering if you knew of any other better script that would keep the same dimensions of the original text or some other idea you could share? My script for this is: <a href="#" class="links" onclick="MM_openBrWindow('artists/richardcook.html','modular9','scrollbars=yes,width=457,height=600')" onMouseOver="this.innerHTML = 'modular9';" onMouseOut="this.innerHTML = 'richard cook';">richard cook</a> Highlighted red is the main rollover change. Any help/idea would be most appreciated! Thanks again Richard Right, I've got some image rollover codes. Have a look at it by the link at the bottom. Every time I view my pictures there's always a white box with and X in. I know that means it hasn't loaded/downloaded. I would like a code so that I can make the pictures save in the visitors computer so it doesn't happen again. ToshNeox My website: http://www.tc-ua.piczo.com/ So 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. Hi everyone, I would really appreciate your help here. I'm not entirely sure if this is html or javascript but... I would like to create a button which is disabled until a certain link is clicked on the webpage... If this possible at all? Thank you Paul Hi I am trying to create a button for my webpage so that when the mouse hovers over the button the image changes, then when the mouse leaves button the image changes back to the original. I have this but its not working <head> <body><button><img src=http://fc07.deviantart.net/fs6/i/2005/093/5/e/Beep_by_fatking.png width="150" height="150" title="Beep" <img src="http://fatking.deviantart.com/art/Shwf-27296191?q=gallery%3Afatking%20randomize%3A1&qo=2" onmouseover="this.src="http://fc09.deviantart.net/fs9/i/2006/005/8/2/Shwf_by_fatking.jpg" onmouseout="this.src="http://fc07.deviantart.net/fs6/i/2005/093/5/e/Beep_by_fatking.png"> let's say we want to create a button named HOME which will lead to the index.html after clicking.and the image has to be images/img1.jpg .code for this ? i used that <button type="button" value="home" onClick=window.location="index.jpg" "img" scr="images/img1.jpg></button> link worked but image didn't appear. also,onClick thing has to do something with the java scripts too? I need to add a browse button to my webpage which has the same functionality as that of the Browse button in windows application. Is there any particular Java API for same, or can it be done using javascript "Home" appears on the button.When we click it it goes to "index.html" the image related to home button is home.jpg. So button's image is home.jpg ,after clicking the button it should take to a link we have given and button's name is Home.how to do that? thanks Hello Friends, I have page which is a type of form with many textbox and labels. I have used table for designing this form. How can I use a submit button so that it is placed in the center of the cell at the bottom of the page. In short I need my Submit Button in the center of the page. Please let me know as early as possible. OK so basically I have made a quick HTML code to hide some You Tube videos because they spoil the thing I was doing. My testing html worked perfectly, all with this total code: Quote: <html> <body> <h1>__________________________________________________________________________________________</h1> <div style="margin:20px; margin-top:5px"><div class="quotetitle"><strong>Spoiler :</strong> Video: <input type="button" value="Show" style="width:60px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Masquer'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="330" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/w-W6YJvrKPk?fs=1&hl=en_US&rel=0" /><embed type="application/x-shockwave-flash" width="550" height="330" src="http://www.youtube.com/v/w-W6YJvrKPk?fs=1&hl=en_US&rel=0" allowscriptaccess="always" allowfullscreen="true"></embed> </object></div></div></div> <div style="margin:20px; margin-top:5px"><div class="quotetitle"><strong>Spoiler :</strong> Video: <input type="button" value="Show" style="width:60px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Masquer'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="550" height="330" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/qXh47Qa92kk?fs=1&hl=en_US&rel=0" /><embed type="application/x-shockwave-flash" width="550" height="330" src="http://www.youtube.com/v/qXh47Qa92kk?fs=1&hl=en_US&rel=0" allowscriptaccess="always" allowfullscreen="true"></embed> </object></div></div></div> <h1>__________________________________________________________________________________________</h1> </body> </html> But anyways, what I did was copy and paste the red text into my website, but the buttons don't show up. Is there any way I can make it work? I am using a host from THESE GUYS. Any help? {And yes I know I used quote instead of code tags, had to because it cut it off} |
|||||||