HTML - Change Background Image Of Div Using Javascript
hi guys. i want to change the background image of a div when the user selects a football team from a dropdown select box. here's my code:
Code: function changeDivImageArsenal() { var imgPath = new String(); imgPath = document.getElementById("right_box").style.backgroundImage; if(imgPath == "url(images/blackburn.jpg)" || imgPath == "") { document.getElementById("right_box").style.backgroundImage = "url(images/arsenal.jpg)"; } } function changeDivImageBlackburn() { var imgPath = new String(); imgPath = document.getElementById("right_box").style.backgroundImage; if(imgPath == "url(images/arsenal.jpg)" || imgPath == "") { document.getElementById("right_box").style.backgroundImage = "url(images/blackburn.jpg)"; } } thats fine and works if i just have 2 different images. but if i want to have 20 different selections, what do i write in the 'if' statement? thanks in advance Similar Tutorialsis it possible to include an expandable background image in CSS or Javascript in a simple HTML or XTML page the background for the WHOLE page, not inside a table or cell here an example in flash: http://www.wowlab.net/wow/system01.html Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result? Hello all! I have a question that I'm hoping someone can help me with... I want to create a rollover image that behaves very specially. I have a smaller image that is like the "enter button" for the site. I want it to work like this: When you mouse over the "enter button" it changes the background image like a rollover. It doesn't have to actually change the background image... I will be happy if it just makes a rollover and the second image is centered on the page like the background image. I basically want it to be that when you mouse over the enter button it looks like the background image changes. Since the enter button is small and the background image is large, it doesn't look right when I do it. Will someone please tell me if you know a way to do this? Thank you so much! I will really appreciate it. Shei <3 I am doing a little updating on one of my sites, and I found a nice template to work with. The problem I have with it is, it is a jpeg and when I view it with the broswer the little save-print-view icon pops up and looks like junk. Is there any way to disable the {template?} or whatever so that it works without this happining? Thanks, Majik I've seen it done, but probably not in html. Every time the page is reloaded, the background colour within certain areas of the page will change to one of a series of pre-set colours. Usually this is all background divs or table cells that have been earmarked for this colour change, but how on earth do you set that up in html? Any ideas? Ok, I dont know what its called, but you know that little 16x16 picture that appears before the URL in the address box? That little image that appears next to the lnks in your favorites? How do you change that? Hi: This morning I changed an old image on my website to a NEW image. No names were changed in my Main Page. Still the same old src=etc, etc However, after 20 minutes, the *old* image is still displaying. Even though I only have the *new* image on my apache Webserver !! *Who* keeps this old image and where do they keep it ? I'm very puzzled ! Can anyone explain this please ? Thank you. -Mel Smith Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? I am working on my 3rd navigaition, except this time i need the images to change when the mouse goes over them. How should i go about doing this? I have seen many ways but i want to hear what you think the best way to do this is. Ok, so i have an image that's 2 x 1 and the div I'm placing it in is 1 x 1. (easy math example) My website is showing the top half of the image, which is what i want it to do. I would like it to show the bottom half of the image when i put my mouse over it. How do i do this? (It's a blue button that changes yellow) So basically how do i change the image position in that div? Thanks I have been asked to redesign a site. The basic elements will stay the same, but the folder structure is crazy! The current site is http://www.npsign.com Please don't pay attention to the current code on the site. I'm doing a complete makeover, so the fact that it is currently not W3C standard will change. However, the index.html file or home page has pictures that rotate in a frame. I don't mind changing any code at all. In fact I think that I'm going to have to redesign the entire site!! On the home page you will notice that the pictures rotate and or change every 3 seconds or so. What I'm looking for is an answer to how to create this change in Dreamweaver CS5.5. The index.html file is the only file that this takes place on. I guess to give it a more dynamic look. However, is my best option to use adobe flash to change the images, or is there more simplified code to change the images in the block? Any feedback on this would be appreciated, even if there are multiple example for me to create the effect of different images changing. This could be a fade effect, or a simple picture to picture swap. This particular subject is beyond my knowledge, as well as a few more questions I may have. Basically, they are looking for a way to get this done on the cheap. I don't mind doing it because it is a learning experience for me!! Thank you for all responses!! Edit: This may be what I'm looking for! http://help.adobe.com/en_US/Dreamwea...f21-7ae8a.html Any response is appreciated! I am having an impossible time finding the correct way to code this in Expression Web 4. I want to have an image that when it's moused over will change to another image, and back again to the original image when you move the mouse off. Nothing I can find online seems to do the trick, though. Any suggestions? iv got two images and i want one to change into the other on mouseover but i also need it to be linked to a certain page , so basically its one image changing to another on mouseover and on click goes to a specified page if therea anything else you need to know please just ask Jake I'm designing a website in html for a college project. I'm having a bit of trouble so hopefully someone here can help me. At the moment I have a white square on the homepage that is a link. I was hoping that when I have visited the page it links to and return to the homepage this square will be a different colour. I don't know if this is even possible but I would appreciate any advice anyone can give me. Thanks Is it possible, and if so - how do I change color of an image using html. For example: HTML Code: <img src="http://i41.tinypic.com/30x7r49.png" border="0" color="blue /> But that doesn't work. I searched Google and found nothing. Any Solutions? Thank you in advance. Hi, I'm trying to do an image changer that when you click on a link, an image changes. I have the image change working, but I want a link to the full-size image below to also change. I tried several things, but what makes the most sense to me is to have a function change the link, so I used the script I got for the image change and tweaked it so it would change the link.....it's not working. I've been trying very hard, but I'm not very good at javascript, so if someone could help, that would be wonderful! The page is he http://sc-lee.com/newlay/ac.html And the code in question is he Code: <head> <script> function changeImage(filename) { document.mainimage.src = filename; } ***ntion changeText(linkadd) { document.link.href = linkadd; } </script> </head> <body> <br><bR><a href="javascript:changeImage('studio/ac-1s.jpg'),changeText(ac-1.jpg);">perspective moving into court</a> <br><a href="javascript:changeImage('studio/ac-3s.jpg'),changeText(ac-3.jpg)">perspective moving into court2</a> <br><a href="javascript:changeImage('studio/ac-6s.jpg'),changeText(ac-6.jpg)">exterior perspective of complex</a> <BR /><BR /> <img name="mainimage" src="studio/ac-1s.jpg"> <br /><a href="ac-1.jpg" target="_blank" name="linkadd">fullsize</a> </body> </body> </html> I understand Java on a primitive level. I am building a restaurant website; http://www.mypitagrill.com/test/ I have gotten the top 4 menu buttons to change the designated image on the right-side stage. Problem #1: When you scroll down just a bit, then click one of these top 4 menu buttons, it automatically refreshes to back to the top of the page. Although, I would like for the image to change without this refresh that is scrolling the page back to the top. -- Which I believe is the result of my second problem. Problem #2: If I click another remaining menu button that links me to another page entirely (such as; specials.htm, order.htm, location.htm), then click back to the 3 of 4 remaining top menu butons (such as; platters, appetizers, kinds menu), ...it does not bring me to the respective menu image, rather is automatically brings me to the default top image "Pita Sandwiches". I believe this is related to the "Auto Refresh" mentioned in Problem #1. -- You may even notice that I even tried incorporating webpage Anchors, to return to the respective image, but that didn't do the trick. Can anyone suggest what might be refreshing the page back to the top? Or does anyone have a similar Java script that I could try to avoid this exisiting problem? PS, thank God for websites like this, and for people like you that take the time to help others! It has saved my A** on several occasion! Best Regards- Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth. Thanks! Help-my-HTML I'd like to improve the appearance of three buttons on an html page. i believe this is the code: Code: <input type="submit" name="purchase" value="Use Remaining Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px" rel="gb_page_center[600, 635] "> <input type="button" name="search" value="Get New Credits" onclick="window.location.href='newcredits.php';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> <input type="button" name="search" value="Search Again Now" onclick="window.location.href='page.php??page=12';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> How can I add more attractive buttons, which would include the text "Use Remaining Credits", etc.? can you please provide a code example, with image code? Thanks 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! |