Search the Community

Hi folks.I want to have an image following the mouse but only inside a specific div inside one post, not in all the page. How could I do that?I have the following code for the image in all the web: Code:<script type="text/javascript">//<![CDATA[var trailimage=["http://img197.imageshack.us/img197/5277/estrellab.gif", , ]var offsetfrommouse=[12,10]var displayduration=0if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')function gettrailobj(){if (document.getElementById)return document.getElementById("trailimageid").styleelse if (document.all)return document.all.trailimagid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)gettrailobj().display="none"elsegettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}document.onmousemove=followmouseif (displayduration>0)setTimeout("hidetrail()", displayduration*1000)//]]></script> Thanks a lot!

Hi folks.I want to have an image following the mouse but only inside a specific div inside one post, not in all the page. How could I do that?I have the following code for the image in all the web: Code:<script type="text/javascript">//<![CDATA[var trailimage=["http://img197.imageshack.us/img197/5277/estrellab.gif", , ]var offsetfrommouse=[12,10]var displayduration=0if (document.getElementById || document.all)document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:100px;width:1px;height:1px"><img border="0" src="'+trailimage[0]+'"></div>')function gettrailobj(){if (document.getElementById)return document.getElementById("trailimageid").styleelse if (document.all)return document.all.trailimagid.style}function truebody(){return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function hidetrail(){gettrailobj().visibility="hidden"document.onmousemove=""}function followmouse(e){var xcoord=offsetfrommouse[0]var ycoord=offsetfrommouse[1]if (typeof e != "undefined"){xcoord+=e.pageXycoord+=e.pageY}else if (typeof window.event !="undefined"){xcoord+=truebody().scrollLeft+event.clientXycoord+=truebody().scrollTop+event.clientY}var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)gettrailobj().display="none"elsegettrailobj().display=""gettrailobj().left=xcoord+"px"gettrailobj().top=ycoord+"px"}document.onmousemove=followmouseif (displayduration>0)setTimeout("hidetrail()", displayduration*1000)//]]></script> Thanks a lot!

Hello, I really need some help concerning multiple responsive background images. I am creating a one page website with wordpress that contains of 6 sections and each should have a background image and over it should be some content (like text) Well I have tried several things and in my latest version it scales the background image in proportion but it cuts some parts off the image when the browser window is smaller <div id="sec_5"> <div class="span5"> <div class="txt_left"> <h2>SOME CONTENT</h2> <p>SOME CONTENT</p> </div> <!-- ende div txt_left --> </div> <!-- end span5 --> </div> <!-- ende div sec_5 --> #sec_5 { padding-top:43,8%; max-width:1920px; height:auto;}.span5 { background-size: 100% auto; background-size: cover; background-position: center center; vertical-align: top; background-image: url('images/page5_bg.jpg');} I also tried to give the background-image a specific height but then of course if you scale it down- it works perfectly without cutting off the image- but the height remains... I really don't know how to solve this issue! I'd appreciate any help!! =)

hey guys l just finished learning javascript and want to build a simple image slider. l tried using array but it just won't slide l would like to know to build one without jquery. you can direct me to a site that explains the process or just paste the code here..thanks ahead.

Hi all! I have a problem I can't figure out at all. In the image provided below, (you can also check http://www.simuscape...utalk/index.php), I have some imagelinks, (marked in red), located below the header and above the gold/beige background. But only the top of those imagelinks are visible, rather than being positioned in the middle of that dark background, approx. 17 px up from their current positioning. However, no matter how I try to change what's in the stylesheet, it also affects the Simuscape Index and Logout navigations, (marked in blue). What am I doing wrong and what do I need to do? Codes in stylesheet; /* Navigation--------------------- */ #menu { padding: 8px 0 0 1px; overflow: hidden;} #nav { padding: 0; margin: 0 auto; list-style-type: none; float: left; position: relative; left: 50%;} #nav li { float:left; position:relative; right:50%; } #nav a { display: block; width: 24px; height: 19px; margin: 0 0px 0 0px; Edit to add 1// Made another change in the stylesheet for each imagelink; Code from; .home { background: url("{T_IMAGESET_LANG_PATH}/home.png") 0 0 no-repeat; to; .home { background: url("{T_IMAGESET_LANG_PATH}/home.png") 0 -18px no-repeat; The result; The images were placed more accurate, but parts of the top is cut off and the hover images are in the wrong position... Edit to add 2// Okey, by reducing the transparent area between the home.png and the hover effect on the same .png, I have managade to allign them. The only actual problem at the moment is that these image links are cut off on the top... How to address this issue?

EDIT: i found out myself, sorry for a empty post! ..

I have a logo that I would like to appear on my page header. I deleted the background so that the header would show through but a border still appears around the logo. Is there a way I can get rid of this? The image is not located on the stylesheet, but instead on each webpage. I know that this is not correct, but it was causing me trouble so for now i'm leaving it as is. Here is the section of code from the page that contains the image. <body><input name="title" type="hidden" value="Home" /><div class="container"> <div class="top"> <p class="logo">Australian Barge Hire</p> <img src="images/photos/sealift1/logo no background.png" width="150" height="78.61" class="float-right" border="0" /> </a> <p class="slogan">Jack-up (self elevating platform) and<br />Construction Barges Australia Wide</p> </div> I'm sure that I haven't given enough information, so please let me know what else I should be providing. Thanks in advance for any assistance you can give. Edited to add: when I delete the class="float-right" section the border does not appear (yay!) But the image is also then in the middle of the header, not where I want it to the right hand side.

I'm not very good with programming, still learning HTML5/CSS3, so I apologize if this is a dumb request. I'm doing a web page (online portfolio) and I have the layout done and looking near how I want, however, on pages where I am showing samples of my work, I have imageA1 large and in the centre, and to the right, 3 thumbs (imageA1, imageA2, imageA3) so when you click a thumb the central image loads to that jpg. I want to avoid using flash. As it is now, if I click imageA1, it loads the page ../imageA1.html, if I click the thumbnail for image1B, it loads .../image1B.html etc... I'm hoping someone can point me to where I can find a good copy/paste script so that I load .../imageA.html and when I click the thumbs its a simple image replace for the central image instead of loading another html. That way, if I have 10 pieces in my portfolio with 3 images each, I only have 10 html/pages to load instead of 30. Hopefully that made sense. I've found image replace but, always 1 image and a click or mouseover swaps it to another image. I want 1 image in the centre, and 3 thumbs that when clicked or mouseovered swap the central larger image. Thanks.

I have a div that contains an image. I would like the image to change, approximately every 5 seconds, to another image. There may be up to 10 images that I would like to have rotate (although I suppose the amount of images is, perhaps, irrelevant). I know that this is possible with Java Script. I've seen it work and suspect it's actually fairly straight forward (I'm sure there's countless tutorials on the internet, if I really get stuck). What I'd really like to know is if this is possible without using Java Script and instead using CSS? I believe it's possible in CSS3, as I read an article earlier with someone suggesting it was possible (but their demos weren't working in Internet Explorer). But that is, of course, a problem. I'd like a solution that I can use in most "major" browsers (IE, Chrome, Firefox, Safari etc.). CSS3 is only supported on the latest browsers and, even then, not all features are compatible. So, I don't think that's the answer. Does that leave me with no choice but to use Java Script?

I am having trouble getting the height of an image to re-size in proportion to its width when the screen gets re-sized. I would like to only use CSS. I've looked around the internet and nothing I am finding is helping. Here is my CSS as of now #banner img{max-width:100% !important;width:900px;height:auto;} The width will re-size the but the height won't. This is only a problem in IE8 (which is 20% of all our site traffic). Can anyone help? Thank you,

I am trying to create my own Image( ); Object. This is how the build in Image function works: var img = new Image(); // Create new img element img.src = 'myImage.png'; // Set source path ctx.drawImage(img,0,0) is going to draw the image loaded from the img.src property. But I don't understand why.. Why am I not required to type: ctx.drawImage(img.src,0,0) ?? In fact, that breaks the script. Saying Type Error Please help me out here, I want to create my own "new Image()" with custom properties and methods..

hello again, since im not sure this is php coding related, ill just go ahead and type in here.correct me if im wrong.. well, im using latest version of verot.net.its a script created for resize pictures and stuff like that, i have used it ALOT in the past.so i was thinking of using it for a project. and everything works just fine as i can see for now.all but the picture names. when i am uploading a picture, i would like to change the name to the user_id given in the database. i DO had succes with this also on the upload, but the trouble is with the picture.i just CANT in anyway and anyhow i try to change the freaking name once its moving to my server. its keeping the same name, and its pretty annoying -.-'... any ideas?...code below: if(!empty($_FILES['user_picture']))//allways form name...{$handle = new Upload($_FILES['user_picture']);//starting picture uploader..if ($handle->uploaded){ $handle->image_resize = true; $handle->image_ratio = false; //$handle->image_convert = gif;//a different pic format... $handle->image_x = 100; //Width in Pixels... $handle->image_y = 100; //Height in Pixels... $handle->Process('user_pics/'); $id = mysql_insert_id();//id just given in the database... //$image = $handle->file_dst_name;//avatar with real name... $image = $handle->file_new_name_body = $id;//avatar with changed name... (DOSENT WORK...) //mysql_query("INSERT INTO users (user_avatar) VALUES ('$image')"); mysql_query("UPDATE users SET user_avatar = '$image' WHERE u_id = '$id'");}}//end empty statement... thanks ALOT in advance!...

I've made a slideshow based on javascript.All image tags with different title attributes.When the mouse is located within the image area on the screen, the title text will be presented.Part of the code: function nextslide(){ which++; var title = Record[which] + " : " + Titel[which]; document.images.slide.title = title; ... However,Going to the next slides of the slideshow, the same title will be shown because the mouse is hold on the same position(it changes only when mouse moves out and then moves inside image area). Question:Is it possible that, **with steady mouse position**, the text of the title attribute changes visible with every next slide?A small javascript example is welcome.ThanksGerard

Hi there,I really need help. Im willing to pay for that. Im trying to post an add on a website which accept HTML. The problem is I was using image maping an everything was working fine for around 3 months but suddenly stopped working. I see HTML editor from that website delete maping HTML code when I save the HTML. Well, I changed to used Fireworks and Photoshop HTML code created when sliced my image and added links. I discover I only can use table or div but each sliced image appear with a space around each one. In other words, every sliced image are separated by one space. I dont know what to do.HTML code is in attachment.Please help me ASAP.Thank you in advancead.txt

I'm having a problem and i'd like some help please. I have made a script for creating an image with PHP using GD library, but the problem is when i preview it on the Firefox it shows me an error in Firebug: "Image corrupt or truncated:localhost/my_scripts/images.php". NOTE: this is not an error displayed from PHP, it seems more like an error comming from the browser.I have checked my code for syntaxes many times, i have also tried out and other gd functions, like imagegif, imagettftext etc etc but didn't have any effect. Here's my code: <?php//$image = @imagecreate(200, 20)or die("Cannot Initialize new GD image stream");$image = imagecreate(200, 20);$background = imagecolorallocate($image,0,0,0);$foreground = imagecolorallocate($image,255,255,255);imagestring($image,5,5,1,"This is a Test",$foreground);header("Content-type: image/jpeg");imagejpeg($image);imagedestroy($image);?> GD library is enabled i've already checked that in phpinfo(), and I have also tried to preview it and on Chrome and looks the same. Any ideas what i might doing wrong or why happens this? and how can i fix this error??

This should really be basic but for some reason I can't get the background-image to do what I want :/ This is the link: http://webdesign.miad.edu/stimm/ The CSS for the image is: #wrapper{width:1024px;height:768px;} body{background-image:url(../images/bkg.png);background-repeat:no-repeat;width:1024px;height:768px;} And then of course, the wrapper is also in the HTML. I also have some JQuery and Javascript running to create the fade effect. Addt'l notes: I also tried to have no size on the wrapper and background-image, but it still stayed small. If I try to do "cover" as background size, it blows out the entire background and makes it huge. I wouldn't mind the background resizing with the window, but I haven't had much luck with that either. In any case, thanks for the help! -Steffane

In my website I have Fancyboxes that pop out with an HTML website embedded in them. Those work perfectly fine. What I want to do is in one of the boxes is to scroll over in the fancybox (like in an image gallery) to an additional amount of info. The html contact page will open in a fancybox with one business location and then the viewer will be able to click an arrow to the right to shift to the next set of location information (still in the SAME fancybox). Is this possible? What is the fancybox/javascript code to allow a manually scrolling gallery to be possible? This is my current javascript coding: <script type="text/javascript"> $(document).ready(function(){$(".contact").fancybox({'width' : '50%','height' : '50%','autoScale' : false,'transitionIn' : 'fade','transitionOut' : 'fade','overlayOpacity' : 0,'speedIn' : 2000,'speedOut' : 1000,'type' : 'iframe','cyclic' : true}); }); </script> .contact is the class that leads to contact.html page. Any help would be fantastic. Thanks!

Hi all, I have a iframe that is populated with customer information dynamically from the javascript. The focus is then set to the iframe and an option to print the iframe is displayed. The information loads perfectly in the iframe but does not print the contents of the iframe, instead it prints the contents of the page that is displaying the iframe. As soon as I remove the image from the document.write then the the contents of the iframe are printed out perfectly. Any ideas what I could be doing wrong? Here is my html code: <iframe id="ifmsselectedorderprint" style="display:block; height: 1px; width: 1px; position: absolute"></iframe> Here is my js code: var pri = document.getElementById("ifmsselectedorderprint").contentWindow;pri.document.open();pri.document.write("<table width='800'><tr align='center'><td><img src='orderprint.bmp'></br></br></td></tr></table><label>_________________________________________________________________________________________________________________________</label><h1><font face='tahoma'><center>Cashbuild: Tembi-Mall Community Store Order Print</center></font></h1><label>_________________________________________________________________________________________________________________________</label><h2><font face='tahoma'><center>Order Details</center></font></h2>");pri.document.write("</br><table border='0'><tr><th><font face='tahoma' size='4'>Order No.</font></th><th width='10'></th><th><font face='tahoma' size='4'>SAP No.</font></th><th width='10'></th><th><font face='tahoma' size='4'>Sub Total</font></th><th width='10'></th><th><font face='tahoma' size='4'>Vat</font></th><th width='10'></th><th><font face='tahoma' size='4'>Rounding</font></th><th width='10'></th><th><font face='tahoma' size='4'>Grand Total</font></th></tr><tr><td><font face='tahoma'>"+orderno+"</font></td><td width='10'></td><td><font face='tahoma'>"+sapno+"</font></td><td width='10'></td><td><font face='tahoma'>"+subtotal+"</font></td><td width='10'></td><td><font face='tahoma'>"+vat+"</font></td><td width='10'></td><td><font face='tahoma'>"+rounding+"</font></td><td width='10'></td><td><font face='tahoma'>"+grandtotal+"</font></td></tr></table></br><label>_________________________________________________________________________________________________________________________</label></br>"); pri.document.close();pri.focus();pri.print(); Without the following code: <table width='800'><tr align='center'><td><img src='orderprint.bmp'></br></br></td></tr></table> It works perfectly. I would also like to stress that in both cases the iframe loaded correctly. Thanks for all the help.

Hi there - I've been learning html through W3Schools.com. At the beginning of the course I read that using TextEdit is a great too to use for practice. However, now I'm at 'Create an Image Map' (http://www.w3schools...tryhtml_areamap) and I have no idea how to actually assign coordinates to objects in the image I'm working with. Any help is very much appreciated! Thanks ! Ekorn

Dear forum, i copied a gallery and adjusted it.the problem is that i can't adjust the image size.right now the image size is like the files original size 1024x768px or 768x1024px. i changed the width to 600px and as you can see it just cuts of some part of the image.what could be the solution?http://quop.eu/quop/...ublic/quop.html here is the HTML code: <html><body><link rel="stylesheet" type="text/css" href="http://quop.eu/quop/wp-content/public/quop.css"><script type="text/javascript"></script><table align="left" style="border-spacing: 0px;width:100%;"><tbody><tr><td><table class="kl_body"><tbody><td class="kl_m"><div class="kl_box"></div><div class="kl_vorschau kl_height_1"> <a href="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_1.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_2.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_3.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_4.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_5.jpg);background-repeat:no-repeat;"></div></a><a href="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg" target="_blank"><img src="http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg"><div class="kl_foto" style="background:url(http://quop.eu/quop/wp-content/uploads/images/22222986_6.jpg);background-repeat:no-repeat;"></div></a><img src="http://quop.eu/quop/wp-content/public/quop_logo.png"> </td></tr></tbody></table></body></html> here is the CSS code: @charset "UTF-8";* {margin:0px; padding:0px; font-family:'Arial'; text-align:left; border-collapse: collapse;}a {text-decoration:none; border:none;}img {border:none;}.kl_info {vertical-align:top;}.kl_m {width:1px; vertical-align:top;}.kl_vorschau {padding:3px;}.kl_vorschau img {border:1px solid black; width:700px; height:700px;}.kl_vorschau a img {width:100px; height:100px;}.kl_vorschau a .kl_foto {display:none; position:absolute; left:3px; width:600px; height:1024px; border:0px solid black; margin:0px; padding:0px;}.kl_vorschau a:hover .kl_foto {display:block;} sincerely,raitis

I have an image on my home page.However, I want a different background image for my jump pages (each page, different image). I thought if I could put the image in the background of the table I'm using inside a <div> (#maincontent), that would solve the problem. Can this be done in css or html? Thanks.

hello everybody, I am trying to add an image on a login page but when the browsers viewport is resized the image gets overlapped. /*-------------------------Simple reset--------------------------*/ *{margin:0;padding:0;} /*-------------------------General Styles--------------------------*/ html{background:url('../img/bg_tile.jpg') #161718;}body{background:url('../img/bg_center.jpg') no-repeat center center;min-height: 600px; padding: 200px 0 0;font:14px/1.3 'Segoe UI',Arial, sans-serif;}a, a:visited {text-decoration:none;outline:none;color:#54a6de;}a:hover{text-decoration:underline;}section, footer{display: block;}#loginimg{color:white;background: url('../img/login.png') no-repeat;height: 400px;width:400px;float:left;margin-left: 315px;top: 0px;padding: 0 0 0;display: block;} /*----------------------------Styling the forms-----------------------------*/ #formContainer{width:288px;height:321px;margin:0 auto;position:relative;z-index:1; -moz-perspective: 800px;-webkit-perspective: 800px;perspective: 800px;}#formContainer form{width:100%;height:100%;position:absolute;top:0;left:0; /* Enabling 3d space for the transforms */-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;transform-style: preserve-3d; /* When the forms are flipped, they will be hidden */-moz-backface-visibility: hidden;-webkit-backface-visibility: hidden;backface-visibility: hidden; /* Enabling a smooth animated transition */-moz-transition:0.8s;-webkit-transition:0.8s;transition:0.8s; /* Configure a keyframe animation for Firefox */-moz-animation: pulse 2s infinite; /* Configure it for Chrome and Safari */-webkit-animation: pulse 2s infinite;} /* Firefox Keyframe Animation */@-moz-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 8px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}/* Webkit keyframe animation */@-webkit-keyframes pulse{0%{ box-shadow:0 0 1px #008aff;}50%{ box-shadow:0 0 10px #008aff;}100%{ box-shadow:0 0 1px #008aff;}}#login{background:url('../img/login_form_bg.jpg') no-repeat;z-index:100;}#recover{background:url('../img/recover_form_bg.jpg') no-repeat;z-index:1;opacity:0; /* Rotating the recover password form by default */-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);transform:rotateY(180deg);}#formContainer.flipped #login{ opacity:0; /** * Rotating the login form when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);}#formContainer.flipped #recover{ opacity:1; /* Rotating the recover div into view */-moz-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);transform:rotateY(0deg);} /*----------------------------Inputs, Buttons & Links-----------------------------*/ #login .flipLink,#recover .flipLink{ /* The blue ribbon links */ height: 65px; overflow: hidden; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 65px;}#recover .flipLink{right:auto;left:0;}#login:after{/* The "Click here" tooltip */width:98px;height:16px;content:'';background:url('../img/click_here.png') no-repeat;position:absolute;right:-120px;top:22px;}input[type=text],input[type=password]{/* The text fields */font: 15px 'Segoe UI',Arial,sans-serif;border: none;background:none;height: 36px;left: 26px;position: absolute;top: 176px;width: 234px;text-indent: 8px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);color:#eee;outline:none;}#loginPass{top: 215px;}#recoverEmail{top:215px;}input[type=submit]{ /* Submit button */ opacity:0.9;position:absolute;top:262px;left:25px;width: 239px;height:36px;cursor:pointer;border-radius:6px;box-shadow:0 1px 1px #888;border:none;color:#fff;font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif; /* CSS3 Gradients */ background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, rgb(80,102,127)), color-stop(0.5, rgb(87,109,136)), color-stop(1, rgb(106,129,155)));}input[type=submit]:hover{opacity:1;}input::-webkit-input-placeholder { color:#eee;} /*----------------------------The Footer-----------------------------*/ footer{background-color: #111111;bottom: 0;box-shadow: 0 -1px 2px #111111;height: 45px;left: 0;position: fixed;width: 100%;z-index: 100000;}footer h2{color: #EEEEEE;font-size: 14px;font-weight: normal;left: 50%;margin-left: -400px;padding: 13px 0 0;position: absolute;width: 540px;}footer h2 i{font-style:normal;color:#888;}footer a.tzine,a.tzine:visited{color: #999999;font-size: 12px;left: 60%;margin: 16px 0 0 110px;position: absolute;text-decoration: none;top: 0;}footer a i{color:#ccc;font-style: normal;}footer a i b{color:#c92020;font-weight: normal;} <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>Login</title> <!-- Our CSS stylesheet file --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="loginimg"> </div> <div id="formContainer"> <form id="login" method="post" action="./"> <a href="#" id="flipToRecover" class="flipLink">Forgot?</a> <input type="text" name="loginEmail" id="loginEmail" value="Email" /> <input type="password" name="loginPass" id="loginPass" value="pass" /> <input type="submit" name="submit" value="Login" /> </form> <form id="recover" method="post" action="./"> <a href="#" id="flipToLogin" class="flipLink">Forgot?</a> <input type="text" name="recoverEmail" id="recoverEmail" value="Email" /> <input type="submit" name="submit" value="Recover" /> </form> </div> <footer> <h2>© 2012 <i>TechGeeks<i> |</h2> <a class="tzine">Design by TechGeeks Team </footer> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/script.js"></script> </body></html>

The code instructions on the W3schools sample makes ALL the images on my webpage transparent on rollover.What do I do to have this apply only to certain images.I want the image I have on the left side of a home page to stay 100% opache but I want 4 boxes that become transparent on rollover, located in the #maincontent div on my home page.

Hi, I would like to have image with caption printed below the image in XSL-FO. the caption should have right alignment. I am using table for that. It prints images with captions but the problem is the alignemnt of the caption compared to the caption. If the alignment of the image is 'right' then all looks fine: caption is just below the image at the right side. but if the image is center or left then still at the far right of the page. The problem is the table is full width of the page but the image is smaller. The problem can be solved if the width and the alignment of the table corresponds to the width and the alignment of the image. please note that for most of the images its width is not specified. Will really appreciate help to resolve this issue. regards, rnv

I seem to be having problems positioning my background image and colors. body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x; } That is the current code. Right there in chrome and firefox, the image "blinder1.png" is normal. However, as we all know, this is just going to repeat across the top of the page from left to right. Whenever I add the following stipulation background-position:bottom; it seems to warp the image to a fraction of its' size, let alone not align to the "bottom" of the page. Using the left, it still warps the image but not as much. The latent function, the image warping, is really not a main issue for me right now. I am really wondering how to properly align my image across the bottom of the page. I have used the search function, and searched for about an hour or more today but I havent seen any documentation anywhere about this happening. Can anyone help?