|
CSS - Css Text Rollovers (change The Word On Rollover)
I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks.
Similar TutorialsUsing either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?: image1 and image2 are laid out horizontally across the top of the page. When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears. When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves. I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions! I developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled. Is it possible to do this using css? For an example, see this page: chellatextiles.com/Textfab/cocotweed.html Rollover a color thumbnail and it replaces the fabric details. There are about 500 thumbnails through the site that I would need to change. In the HTML below I use CSS-code of Bonrouge (see http://bonrouge.com/br.php?page=rollover2) to make a rollover for an image. I would like to change the code so that onMouseOut the image doesn't change back to the original one but remains the rollover image. I have tried a lot of things but cannot get it working. Could someone help? This is the code I use now: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
/** rollover 2 (pure css) **/
#rollover2 a {text-decoration:none; display:block; height:100%; }
* html #rollover2 a {width:100%; }
#rollover2 {list-style-type:none; width:150px; margin:auto; padding:0;}
#rollover2 li {float:left; height:145px; width:145px; }
#rollover2 li#a a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/acteuropt.jpg);}
#rollover2 li#a a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/kopmetprisma3opt.jpg); }
#rollover2 li#b a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/goudvisbovenopt.jpg); }
#rollover2 li#b a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/denk2opt.jpg); }
#rollover2 a img {border:0; width:0; height:1px; margin-top:-1px; font-size:0; overflow:hidden; }
-->
</style>
</head>
<body>
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
On hover, the background-image changes.
<br>The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.
<br><br>
<ul id="rollover2" class="cfix">
<li id="a"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/denk1opt.jpg" width="30px"; height="30px" border="0" /></a></li>
<li id="b"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/johnhopt.jpg" width="30px"; height="30px" border="0"/></a></li>
</ul>
</div>
</body>
</html>
Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! I have a menu with several links each of which has a span tag connected, when you hover over the link the span tag is revealed as a roll over text. However I have also made the whole page (the page size is controlled by JavaScript) an anchor tag and placed a span for that, so there is a default text which is replaced by the other roll over text. This works fine in Firefox. However, I'm having problems getting this to work properly in IE6. It doesn't reveal the span for the whole page, although the other links are ok, it also reveals the text if I hover over where the rollover text appears. I have validated the CSS and XHTML. Is there a way to fix this or am I going to have to go back to JavaScript? [code] css: body { background: url(images/sips_menu.gif) no-repeat; } a.con { z-index: 1; } a.menu { z-index: 2; } /*set whole page as an invisible link*/ a.con:link,a.con:visited,a.con:hover,a.con:active { background-color: transparent; display: block; border: none; position: absolute; top: 0px; left: 0px; width: 790px; height: 540px; text-decoration: none; cursor: default; } /*set span for whole page as visible only when hovering over page*/ a.con span { display:none; } a.con:hover span { color: black; font-weight: normal; display: block; text-decoration: none; font-size: 11px; font-family: arial, sans-serif; text-align: left; position: absolute; top: 125px; left: 580px; width: 170px; height: 150px; } /*menu links - when mouse is over these it is not over general page anchor*/ a.menu:link,a.menu:visited,a.menu:hover,a.menu:active { background-color: white; border: 1px solid black; color: #617AB2; font-size: 12px; font-weight: bolder; font-family: arial, sans-serif; text-decoration: none; text-align: left; padding: 4px 6px 4px 6px; } a.menu:hover { color: red; } /*menu link rollover text visible when mouse over*/ a.menu span { display: none; } a.menu:hover span { color: black; font-weight: normal; display: block; } /* Ids to position each of the menu links */ #one { position: absolute; top: 180px; left: 20px; } #two { position: absolute; top: 250px; left: 250px; } #three { position: absolute; top: 380px; left: 220px; } #four { position: absolute; top: 320px; left: 420px; } #five { position: absolute; top: 450px; left: 565px; } /* Ids to position the span tags*/ #a { position: absolute; top: -55px; left: 560px; width: 170px; } #b { position: absolute; top: -125px; left: 330px; width: 170px; } #c { position: absolute; top: -255px; left: 360px; width: 170px; } #d { position: absolute; top: -195px; left: 160px; width: 170px; } #e { position: absolute; top: -325px; left: 15px; width: 170px; } xhtml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>title</title> <link rel="stylesheet" href="menu.css" type="text/css" /> </head> <body> <p><a class="con" href="#"><span>text</span></a></p> <p><a class="menu" id="one" href="#">link<span id="a">rollover text</span></a><br /></p> <p><a class="menu" id="two" href="#">link<span id="b">rollover text</span></a><br /></p> <p><a class="menu" id="three" href="#">link<span id="c">rollover text</span></a><br /></p> <p><a class="menu" id="four" href="#">link <span id="d">rollover text</span></a><br /></p> <p><a class="menu" id="five" href="#">link<span id="e">rollover text</span></a><br /></p> </body> </html> I need to get away from "text-graphics" as much as possible because I am writing multilingual apps where the translator configures the translations of all the control words that appear on the menus. Besides it causes downloading lots of little images and this is not good. I would like to do a submit button in a form with a rollover, using the background-image property. Any text on that button is just superimposed on the image via html form. This will be bandwidth friendly as well as easier to make a translation, as I can use the same background image for all the buttons and if the user wants to reskin it all he has to do is put a different bg grc in the css file and resize it. Here is what I have to mess with right now: Code:
#button_btn1 {
font-family: Tahoma, sans-serif;
text-align: center;
font-weight: bold;
font-size: 12pt;
background-image: url(http://localhost/~me/testing/img/BlurMetalLa7.gif);
color: #003300;
border: none;
height: 24px;
width: 126px;
cursor: help;
}
Code: <form action="foo.php"> <input type='submit' id='button_btn1' name='submit' value='Click me' /> </form> It displays the image all right, now I want to rollover. It seems like I need to write a javascript invoked onMouseover to alter the background-image property. I don't know how to do this. I've looked at rollovers that fool with the visibility property and I've even messed with them myself, but they seem very dicey and with each new brower version they break in yet another novel way. I'm having a problem getting the text of an <a> tag to be what I want where I want. No one in the javascript forum wants to tackle this. maybe it is a css thing. I made this interlocking tabbed menu which I do by javascript updating the position of the background graphic and its neighbor. I have done buttons before with a background and text overlayed. but they were always <input>'s and whatever I put in the value field just kinda showed up on top of the background graphic. These are actually <a>'s I assumed the text I put in between the <a> and the </a> tag would just show up but it doesn't. I tried making special divs for them but then I run in to position problems. If I make it absolute the first one is fine, then they all pile on top of it. If I make it relative, NONE of them show. Here is a test http://colleenweb.com/tests/bartest.php There is nothing like css for turning my brain into industrial waste. This has to be doable. Someone who understands this stuff please advise? Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; I am on a web site which allows the user to customize certain aspects of your pages. The site inserts a search button with the title "Go" inside a form. I'd like to change the text to "Search". I have no way to access the xhtml because the site inserts it into the page and I can't replace the form with one of my own because non site generated forms are not allowed due to security; however, we can modify the button in question since lines like this work: Puts image behind button: .productSearchCell button {background: url("http://url");} Removes button: .productSearchCell button {display:none;} 1. Can I change the text from "Go" to "Search" using a css override? OR 2. Can I get rid of the text altogether and instead place an image on top of the button with a CSS overide? The background code above places the image behind the button instead of on top of it. OR 3. Make the site's generic button invisible and use my own image button to trigger the form inserted by the site. I really would like to use this method, but it has to be a CSS override as we can't touch the use the form tag in the xhtml section of code we can edit. Code: <div class="productSearchCell"> <div class="hr"></div> <h3>Search this Store </h3> <div class="clearfix"> <form action="http://url"> <div> <input type="text" id="page_module0-queryInput" name="qs" value="" size="14" /><button type="submit" class="inline"><span class="buttonLeft"><span class="buttonRight">Go</span></span></button> </div> </form> </div> <a class="inlineActionLink" href="url">View all Products</a> </div> I'm having a mental block this should be really easy. I have an image rollover set up a:hover.deb {background:url(images/deb.jpg);} but I also want it to display some text elsewhere on the page many thanks I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? any recommendations on a way to make my h2 text change opacity when the containing div is hovered? Better explanation: I have an accordion style page with click-able divs that contain the title of that div in a h2 tag. The div is much larger than the text in the h2 tag. I am able to make the text itself change opacity when it its hovered but I would like the text to change when the div is hovered. I do not want to make the div itself change opacity because it overlaps the div behind it. (I understand that I need have to add some filters and such, I am not worried about that at this point) html code: Code: <div class="previous_tab">
<a href="movement.html" class="clickable_tab">
<h2>The Movement</h2>
</a>
</div>
css code: Code: .previous_tab
{
width:100px;
height:500px;
margin-left:-5px;
background-color: #CCCCCC;
{
.clickable_tab
{
display:block;
width:100px;
height:500px;
text-decoration: none;
}
h2
{
opacity:.6;
font-size: 1em;
color: #333333;
}
h2:hover
{
opacity:1;
}
Hello, I am using a template, and i was wondering if i can have a css code on the top of the template code so it says that any words, or text will be in a font?? i do not know css and right now i don't have the time too, i will learn it later on, over the summer, but as of now i am busy Thanks I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want. simple example: CSS: Code:
a:link, a:visited, a:active {
font-size: 1em;
}
a:hover {
font-size: 1.5em;
}
HTML: Code:
<div>
<a href="#">Text</a>
</div>
Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- I'm assuming this is going to be a CSS issue. I have a table cell which contains text, and for the sake of accessibility, I'm allowing text resizing and would like to prevent the table cell from changing in height when the font size is increased. Basically, as the font size increases, the width of the cell is the only thing that will change, not the height. First, is this possible? Second, if so how can this be achieved? I'm pretty sure that I've seen other sites do this, just can't remember where. Thanks in advance! Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either. Code:
body
{
background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
top:0;
width: 100%;
height: 900px;
Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css. Help will be greatly appreciated EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts. delete |
|||||||