jmichael68 Posted September 15, 2010 Share Posted September 15, 2010 I have a demo of a program I am working on at http://www.supfrt.com/globworld/index3.htm The left and right bottoms "globworld" and and "kids blog"are css rollover buttons that need to enlarge on a mouseover but should enlarge without overlapping the green bordered background that contains the swf file and without shifting any of the other elements on the page. How do I do this? Here is the html code: <body> <div id="container"> <div id="header"> <img style="position:relative; float:left; top:10px; width:136px; height:57px" src="./images/glob-world.png"> <img style="position:relative; top:0px; left:120px; width:493px; height:124px" src="./images/top-header.png"> </div> <div id="content-container"> <div id="content"> <a href="some.html" onmouseover="document.but1.src='./images/globworld1.png'" onmouseout="document.but1.src='./images/globworld2.png'" > <img style="position:relative; float:left; top:10px; left:-10px;" src="./images/globworld2.png" name="but1" width="93" height="130" border="0" alt="..."> </a> <a href="some.html" onmouseover="document.but.src='./images/kids_blog1.png'" onmouseout="document.but.src='./images/kids_blog2.png'" > <img style="position:relative; float:left; top:15px; left:824px;" src="./images/kids_blog2.png" name="but" width="103" height="115" border="0" alt="..."> </a> <p style="position:relative; float:top; top:-138px; left:94px; width:810px; height:610px"><script language="JavaScript" type="text/javascript"> AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0', 'width', '810', 'height', '610', 'src', 'fashion_zombies', 'quality', 'high', 'pluginspage', 'http://www.adobe.com/go/getflashplayer', 'valign', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', 'fashion_zombies', 'bgcolor', '#ffffff', 'name', 'fashion_zombies', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','always', 'movie', 'fashion_zombies', 'salign', 'center' ); //end AC code </script></p> </div> <div id='footer'> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style" align=center> <a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c8c38e749a1ddc3" class="addthis_button_compact">Share</a> <span class="addthis_separator">|</span> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c8c38e749a1ddc3"></script> <!-- AddThis Button END --> </div> </div> </div> </body> And here is the CSS code: #navigation li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li a:hover { background: #383; } #content-container { float: left; width: 1000px; } #section-navigation { float: left; width: 1000px; padding: 0px 0; margin: 0 0px; display: inline; } #section-navigation ul { margin: 0; padding: 0; } #section-navigation ul li { margin: 0 0 1em; padding: 0; list-style-type: none; } #content2 { float: left; width: 1000px; top:50px; left:900px; padding: 20px 0; margin: 0 0 0 30px; background: url(../images/kids_blog1.png) no-repeat right top; } #content { float: left; width: 1000px; height: 650px; padding: 20px 0; margin: 0 0 0 30px; background: url(../images/fashionzombie_main.png) no-repeat center top; z-index: 2; } #content h2 { margin: 0; z-index: 1; } #aside { position:center; width: 1000px; } #aside h3 { margin: 0; } #footer { float:right; width: 550px; padding: 20px 0; } Quote Link to comment Share on other sites More sharing options...
Miss_Rebelx Posted September 17, 2010 Share Posted September 17, 2010 Depending how you care to position the images, you could go forward with having the onMouseOver and onMouseOut effects of changing the image, and then simply position the image using "right: 0px;". Don't specify an image size though, because changing the image itself won't change the size you allowed for it (it would resize itself/ shrink or stretch). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.