HTML - Rollover Image With Text Placement
Dear Forum,
I'm a new member and needing quick help for a client who wants to rollover images and show different text for each image in a single location. I normally use Dreamweaver to create my rollover images but don't have text associated with that. The image will be a link so the client can click on the rollover image to enter that section of the Web Site. The text location needs to be in a particular location down below the images and in one location. I will have as many a 20 images or more all with different titles. I would like to use a java script since that's what I most familiar with but not opposed to using html. I'm in the process of the design as we speak so I need help as soon as I can receive it. Thanks ahead of time. Similar TutorialsHello, I am trying to command a mouse-rollover to display a text under the photo that is to be mouse-rollovered. I know how to display a second picture to showed up upon mouse-rollover on a first picture, but I do not know how to display a text message upon a picture mouse-rollover. Thank you kindly guys 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, I want to place an image on the bottom right corner of the table box and I want to wrap the text with image. For example: some text some text some text some text some text some text some text some some text some some text some some text some some text some Now this bottom right corner which is blank i want to put image in this area, how can i do this, this is all a table column. Please help thanks I am trying to place images along the left and right sides of my page with text running down the center. However, the images in IE tend to line up in the middle with the text but everything is fine in FF. Code: <p class="style3" align="center"> </p> <p align="center"><a href="R100.html">R100</a><a href="FB2.html"><img src="images/FB2.png" alt="FB2" align="right" height="310" width="317" /></a><br /> <a href="ER.html"><img src="images/ER.png" alt="ER" align="left" height="310" width="310" /></a><a href="ER.html">ER</a><br /> <a href="ER-R.html">ER-R</a><br /> <a href="EP.html">EP</a><br /> <a href="EC.html">EC</a><br /> <a href="EC-R.html">EC-R</a><br /> <a href="E3.html">E3</a><br /> <a href="E3-R.html">E3-R</a><br /> <a href="FK.html">FK</a><br /> <a href="FK-R.html">FK-R</a><br /> <a href="GK.html">GK</a><br /> <a href="GT.html">GT</a><br /> <a href="KS.html">KS</a><br /> <a href="GS.html">GS</a><br /> <a href="FB2.html">FB2</a><br /> <a href="HB2.html">HB2</a> <br /> <a href="IB2.html">IB2 </a></p> <p class="style1" align="center"> </p> <p class="style1" align="center"><a href="4-Pole.html">- 4-Pole Alternators - General Information -</a></p> www.vintageparlor.com I am trying to place a google map right below the stacked pictures on the site above. The problem I am running into is if I add the code above the paper image, if I move the google script down with <br>'s the paper moves also. If I put the script after the paper image, it appears below it. HTML Code: <html lang="en"> <head> <title>Vintage Parlor L.L.C.</title> </head> <a href="http://www.vintageparlor.com"><img src="logo.png" align="left"></a><img src="facebook2.png" align="right"> <br> <br> <br> <br> <br> <br> <br> <center><font color="white" face="script"><table border="0" cellspacing="20"> <tr> <td><font color="white" face="script" size="6"><a href="http://www.vintageparlor.com">Home</a></td> <td><font color="white" face="script" size="6">Photo Gallery</td> <td><font color="white" face="script" size="6">Contact Us</td> </tr> </table></font> </center> <body background="background_new1.png" link="white" vlink="white" alink="white"> <br> <br> <br> <table border="0"> <tr> <td rowspan="1" colspan="5" width="921" height="747" background="paper.png"> </tr> </table> <br> <br> <br> <br> <br> <br> </body> </html> HTML Code: <iframe align="right" width="300" height="245" frameborder="1" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&ie=UTF8&ll=33.582323,-111.891396&spn=0.009993,0.021136&t=k&z=16&output=embed"></iframe> Okay so hello everyone, my names chris. I recently decided I was going to do web hosting, and had a friend start building me a template since I lack html. But he only created me a nice background image to add onto. So I centered it on the page and started adding "Draw AP Divs" onto it. At first I had the images perfectly aligned in my firefox browser and I was ready to continue adding stuff to it, however, the images are misplaced in everyone elses browsers (i.e and firefox) And I'm completely clueless on how I can get the images properly aligned in there spots for both browsers.. As you can see there not aligned in that view (internet explorer) but in firefox there fine.. and when I fix them to look right in internet explorer, they mess up in firefox. I'm at a loss. Heres the code if you want it to be posted he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>***aS Hosting</title> <style type="text/css"> <!-- body { background-color: #000000; } #apDiv1 { position:absolute; left:153px; top:122px; width:418px; height:234px; z-index:1; } #apDiv2 { position:absolute; left:95px; top:310px; width:56px; height:48px; z-index:1; } #apDiv3 { position:absolute; left:496px; top:306px; width:223px; height:30px; z-index:1; } .style2 { color: #CCCCCC; font-weight: bold; } #apDiv4 { position:absolute; left:496px; top:359px; width:401px; height:256px; z-index:2; } .style3 {color: #CCCCCC} #apDiv5 { position:absolute; left:234px; top:318px; width:140px; height:149px; z-index:3; } #apDiv6 { position:absolute; left:237px; top:508px; width:138px; height:150px; z-index:4; } #apDiv7 { position:absolute; left:907px; top:36px; width:137px; height:15px; z-index:5; } .style4 { color: #FFFF00; } #apDiv8 { position:absolute; left:511px; top:181px; width:145px; height:25px; z-index:6; } .style6 {color: #666666} #apDiv9 { position:absolute; left:712px; top:219px; width:160px; height:22px; z-index:7; } #apDiv10 { position:absolute; left:851px; top:247px; width:140px; height:19px; z-index:8; } #apDiv11 { position:absolute; left:851px; top:280px; width:141px; height:20px; z-index:9; } #apDiv12 { position:absolute; left:854px; top:312px; width:138px; height:21px; z-index:10; } a:link, a:visited, a:hover { text-decoration: none; } .style7 {color: #FF00FF} #apDiv13 { position:absolute; left:748px; top:21px; width:291px; height:171px; z-index:5; } #apDiv14 { position:absolute; left:916px; top:29px; width:105px; height:15px; z-index:6; } #apDiv15 { position:absolute; left:919px; top:54px; width:106px; height:16px; z-index:7; } #apDiv16 { position:absolute; left:777px; top:87px; width:43px; height:17px; z-index:8; } #apDiv17 { position:absolute; left:920px; top:81px; width:106px; height:16px; z-index:8; } #apDiv18 { position:absolute; left:918px; top:105px; width:107px; height:15px; z-index:9; } #apDiv19 { position:absolute; left:919px; top:129px; width:108px; height:15px; z-index:10; } #apDiv20 { position:absolute; left:918px; top:154px; width:106px; height:15px; z-index:11; } --> </style></head> <body> <div class="style2" id="apDiv3">November 02, 2007</div> <div class="style3" id="apDiv4"> <p>Text</p> <p><br /> </p> </div> <div class="style3" id="apDiv5">Text</div> <div class="style3" id="apDiv6">Text</div> <div id="apDiv13"></div> <div id="apDiv14"><img src="home.jpg" width="45" height="14" /></div> <div id="apDiv15"><img src="aboutus.jpg" width="67" height="14" /></div> <div id="apDiv17"><img src="support.jpg" width="61" height="13" /></div> <div id="apDiv18"><img src="hostingplans.jpg" width="100" height="14" /></div> <div id="apDiv19"><img src="links.jpg" width="42" height="14" /></div> <div id="apDiv20"><img src="controlpanel.jpg" width="103" height="14" /></div> <div align="center"><img src="back.jpg" width="825" height="800" /></div> </body> </html> Any help is great.. and appreciated. G'day, I've got a three column page including a header and footer too. When I place an image in my header div, my left nav gets pushed into my content DIV. Any idea what I should be doing? Here is the code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Impel Personal Training | Mobile Personal Fitness</title> <style type="text/css"> body { margin:0; padding:0; text-align: center; background-color:#fff; color:#000; font-family: Arial, sans-serif; font-size: 10pt; } #container { /*width: 100%;*/ /*margin: 0;*/ background-color: #fff; color: #333; border: 1px solid gray;/*grey;*/ text-align: left; /*line-height: 130%;*/ } #top { padding: 0; height: 100px; background-color: #2F2E7E; color:#000; border-bottom: 1px solid gray; } #top h1 { padding: 0; margin: 0; font-family: Georgia,serif; font-size: 130%; } #leftnav { float: left; width: 160px; margin: 0; padding:10px;/* 1em;*/ } #rightnav { float: right; width: 160px; margin: 0; padding:10px;/* 1em;*/ } #content { margin-left: 180px;/*165px;*/ border-left: 1px solid gray; margin-right:180px; /*165px;*/ border-right: 1px solid gray; padding:10px;/* 1em;*/ text-align:justify; background: url(fadelogo.gif); background-repeat: no-repeat; } #footer { clear: both; margin: 0; padding: .5em; color: gray; background-color: #fff; border-top: 1px solid gray;/*grey;*/ font-family: Verdana, Arial, sans-serif; font-size: 75%; text-align: center; } #footer span { margin:0 20px; } #leftnav p, #rightnav p { margin: 0 0 1em 0; } #rightnav p { margin: 0 0 1em 0; font-family: verdana, arial, sans-serif; font-size: 75%; } #content h2 { margin: 0 0 .5em 0; font-family: Century Gothic, Tahoma; font-weight: normal; color: #8DBA2C; } .smallgrn { font-family: Verdana, Arial, Sans-serif; font-size: 100%; color: #8DBA2C; } .smallnrm { font-family: Verdana, Arial, Sans-serif; font-size: 100%; } #logo { float: left; } #picright { float: right; } /*#content { max-width: 36em; }*/ </style> </head> <body> <div id="container"> <div id="top"> <h1>Welcome</h1> </div> <div id="leftnav"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. </p> </div> <div id="rightnav"> <p>Brendon Osborne<br /> <span class="smallgrn">Accredited Personal Trainer</span> Ph: 0405 602 979 <span class="smallnrm">bosborne@hotmail.com</span> </p> <p>Dean Morrissey<br /> <span class="smallgrn">Accredited Personal Trainer</span> Ph: 0406 094 261 <span class="smallnrm">deanmorrissey@hotmail.com</span></p> </div> <div id="content"> <h2>Subheading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> <div id="footer"> Copyright © 2006 IMPEL Personal Training<span>|</span>ABN: 99 999 999 999<span>|</span>Site Design by Jamie Press </div> </div> </body> </html> Cheers guys, I've got no idea what I should be doing. Jamie Ok I've redesigned my friends website back to his old look since he didnt like mine http://acidtripmedia.com/lmi/ But I need a little help getting the navigation images & links properly. Right now the 2nd row of links is behind the image for the navigation Here is the original site to compa http://lmiinc.com/LMIinc_Marksmanship.html What can I do to fix the placement of the image? I'm trying to build a "Start Menu" style nav based on something I created in BlueVoda. I've finally gotten all the java working, but i can't make my button float over my header image like I had it in the WYSIWYG editor. My site is arlenbresh.atspace.me I've tried style="position:absolute" but to no avail. What am i missing? Should I be taking a different approach to this? 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, I hope I'm posting in the right area as this is my first thread. The problem I'm facing is I have 7 links in a row | Link 1 | Link 2 | Link 3 | Link 4 | Link 5 | Link 6 | Link 7 | and below those links I have nothing. What I want is for Text to appear on rollover on Link 1 and stay there until Link 2 or another link is hovered over. Example: Mouse hovers on Link 1 - called Free Home Survey Text appears below row of links about Free Home Surveys that the company does Mouse hovers on Link 3 - called Personalisation Text appears below the row of links about Personalisation etc Any help would be greatly appreciated. Thanks in advance I want to implement a rollover (javascript or css) that changes text when you rollover it. E.g. someone's name and when you rollover it shows their address. I've googled this and found a css rollover which changes the color of the text but is there a way to completely change the text? Any help much appreciated, thanks Okay, so I've been seeing these sites with text that you rollover and a box with more info appears. How do you do this? JS? CSS? It's hard to explain, so I'll look for an example. Note to mods: I don't know where this would go, so feel free to move it. EDIT: I know you can use the title attribute, but that's not the same thing Thanks. I'm using the DOM rollover script, but I have no idea how to put text over it. Is it even possible? I'd appreciate any help. Thanks! I'm not sure whether this would be html or CSS.. but does anybody know how to get rollover text to popup using html or CSS like I have circled in this screenshot?: http://i134.photobucket.com/albums/q...eenshot_03.jpg Any help is greatly appreciated. So I've got this site, www.jackfrankfurter.com/urbanarch.html and I've got a navigation bar across the top. When you first get to the site, the rollovers work fine but once each page has been visited, the text changes to the "visited" color and the rollover color stops working. Is there something I'm doing wrong in my style page? It looks like this: @charset "UTF-8"; /* CSS Document */ body {background:#000000; color:#666666; font-family:Arial, Helvetica, sans-serif;} a:link {color:#CCCCCC; text-decoration:none;} a:hover {color:#71CEEA;} a:visited {text-decoration:none; color:#F96;} img {border:1px #C5DC79;} .thumbnumber {color:#666666; font-family:Arial, Helvetica, sans-serif; font-size:10px;} Thank you for all your help. It is most appreciated. Yours, Gidmeister i am making a website for my webdesign/JAVA class. On my site i embedded a Left margin sliding menu from http://www.dynamicdrive.com/dynamici...lideinmenu.htm I want to make it so that when i rollover a link in the menu, the link changes from its english text to italian. I know for a fact that it is possible to alter the properties of the links inside the menu when i inserted into my <head>: Quote: <style fprolloverstyle>A:hover {color: #FFFF00} a {text-decoration:none} </style> Im new to webdesign, help would be greatly appreciated! I know this is probably really basic stuff .. but i need different colours for the link, rollover and visited state. But i dont want them to be the same throughout the page, i want each to be specific set of colours. Just point me in the direction of where the answer is .. i dont mind reading up! Thanks. Hi, if anyone would be able to help me with this issue im having doing an image rollover it would be great. Thank you |