|
JavaScript - Any Ideas Were I Can Get This Background Image Js?
Hi all,
I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies Thanks in advance!! Kyle Similar TutorialsIm going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work! Heres what i got in my 'name.js' file i got var name=new Array() name='name.jpg' and in my HTML i got <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div> <table> <script type="text/javascript" language="JavaScript" src="name.js"> document.write('<td id="name2" background="' + name + '">'); </script> </td> </table> </div> </body> </html> Where have a gone wrong?? If I type Hello World into the name.js file and put it in a tb it works fine, im confused thanks, Paul Hello, I've just finished my website. But my random background images load properly sometimes, and sometimes they load as a half. Here is my website: http://www.finnhaverkamp.com/ Here is the relevant HTML: Code: <!--open random background script-->
<script type="text/javascript">
var randnum = Math.random();
var inum = 7;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var images = new Array;
images[1] = "background1.jpg";
images[2] = "background2.jpg";
images[3] = "background3.jpg";
images[4] = "background4.jpg";
images[5] = "background5.jpg";
images[6] = "background6.jpg";
images[7] = "background7.jpg";
var image = images[rand1];
function chBackgr()
{
document.body.style.backgroundImage = 'url(' + image + ')';
}
onload = chBackgr;
<!--close random background script-->
It's weird. Because my background image is certainly random. It's just that sometimes only half of the image loads. Really strange. Any help is appreciated. Thank You. I found a great little starfield script made with javascript and canvas3d. however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script: http://seb.ly/demos/canvas3d/canvas3d2.html how do i get a background image in that? or is it impossible? i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield. I want to use an image as a CSS background-image so I used the Image constructor to load the image: Code: (new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg"; but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!) I have a 16x16 solid color yellow image - .gif type. I'm using it as a background for a div. I'd like to make it transparent but can't figure out how to do. I have Paint.net and follow its instructions to make the image 50% transparent but afterwards, it's completely clear with no hint of yellow. How can I make a transparent solid image? I'd like it about 50% transparent. Thanks... PHP Code: .xstooltip { visibility: hidden; position: absolute; top: 0; left: 0; z-index: 2; font: normal 8pt sans-serif; padding: 3px; border: solid 1px; /*background-color: #DBDBDB;*/ /*background-color: #FFFF77;*/ background-repeat:repeat; background-image:url(/yellow_help.gif); } How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS. You can view the HTML page in question he http://aksdesigns.co.uk/temp/template.html The DIV container is the one with the ID of #MainContent Code: #MainContent {
width: 980px;
height: 550px;
margin: 0 auto;
padding: 0px;
background-image: url(images/Content-bg-1.jpg);
background-repeat: no-repeat;
background-position: top center;
border-left: 2px solid #153365;
border-right: 1px solid #FFF;
}
It probably couldn't be done using CSS be how could I achieve this with Javascript? I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/# so far i have recreated the top left and right edges using Code: var window_width = $(window).width();
var window_height = $(document).height();
var image_height = $("#background").height(); (2914px)
var image_width = $("#background").width(); (3920px)
$("#background").draggable({
scroll: false,
stop: function (event, ui) {
var animate_to = {};
var window_width_resized = $(window).width();
if (ui.position.left > 0) {
animate_to.left = '0px';
}
if (ui.position.top > 0) {
animate_to.top = '0px';
}
//initial size for width
var image_width_gap = window_width - (image_width + ui.position.left);
if (image_width_gap > 0) {
animate_to.left = (0 - (image_width - window_width)) + 'px';
}
//after window gets resized for width
var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
if (image_width_gap_resized > 0) {
animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
}
$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });
then i am using the same logic to do the bottom edge but it doesnt work any ideas here is how i thought the bottom would work Code: //initial size for height
var image_height_gap = window_height - (image_height + ui.position.top);
if (image_height_gap > 0) {
// animate_to.top = (0 - (image_height - window_height)) + 'px';
}
help would be greatly appreciated fixed.. my bg image was infact smaller Hi Guys, I would like to be able to change my webpage background image according to the screen resolution the user uses so: if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat else background = #000000 THANKS A MILLION! After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly. Code: <html>
<title>Welcome :D</title>
<head>
<style type="text/css">
body {
background-color:E6E6E6;
}
</style>
<script type="text/javascript">
//Pre loading images to be used with check boxes.
function preLoad(){
Eyeball= new Image(400,200)
Eyeball.src = "Eyeball.jpg"
Smileys = new Image(400,200)
Smileys.src = "Smileys.gif"
goodAfternoon = new Image(400,200)
goodAfternoon.src = "Good Afternoon.gif"
goodAfternoonFinal = new Image(400,200)
goodAfternoonFinal.src = "Good Afternoon.gif"
zombies=new Image()
zombies.src = "Zombies.jpg"
}
function validate(){
if(document.getElementById("cb1").checked){
document.goodAfternoon.src=Eyeball.src;
}else{
document.goodAfternoon.src=Smileys.src;
}
}
function reset(){
cb1.checked=false;
document.goodAfternoon.src=goodAfternoonFinal.src;
}
var i=0;
function myalert(){
i++
if(i == 1){
alert("I dare you to press me again....");
}
if(i == 2){
}
if(i == 3){
i = 0;
document.body.background = "zombies.src";
}
}
</script>
</head>
<body onLoad="javascript:preLoad()">
This is where I learn a lot of my coding for Java, JavaScript, and HTML
<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
</br>
"Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
<img src="Good Afternoon.gif" name="goodAfternoon">
<input type="button" id="cb2" value="RESET" onClick="reset()"/>
</BR></br></br></br></br>
Hello, thank you for visiting my webpage I hope you like it.
<input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>
I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out? Here is my code in the header: Code: <script type="text/javascript">
function getBackground(){
var bgimg = new Array();
bgimg[0] = "background1";
bgimg[1] = "background2";
bgimg[2] = "background3";
var random = Math.floor(Math.random() * bgimg.length);
var imgurl = bgimg[random];
document.body.style.backgroundImage = 'url(' + imgurl + ')';
}
</script>
body: Code: <body onload="getBackground()"> Hello, I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code: ==== <script language="JavaScript1.2"> var bgimages=new Array() bgimages[0]="../gfx/bgs/bg1.jpg" bgimages[1]="../gfx/bgs/bg2.jpg" //preload images var pathToImg=new Array() for (i=0;i<bgimages.length;i++){ pathToImg[i]=new Image() pathToImg[i].src=bgimages[i] } var inc=-1 function bgSlide(){ if (inc<bgimages.length-1) inc++ else inc=0 document.body.background=pathToImg[inc].src } if (document.all||document.getElementById) window.onload=new Function('setInterval("bgSlide()",6000)') </script> ==== The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate. How would this be possible? Thanks a bunch! -Captainel Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance! Web Page Code Code: <html> <head> <title>slayeroffice | code | image cross fade redux</title> <link rel="stylesheet" type="text/css" href="xfade2_o.css"> <script type="text/javascript" src="xfade2.js"></script> </head> </div> <body background="id=imageContainer"> <div id="imageContainer"> <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg"> </div> </body> </html> Style Sheet 1 Code: #imageContainer {
height:309px;
}
#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}
Style Sheet 2 Code: #imageContainer {
position:relative;
margin:auto;
width:500px;
border:1px solid #000;
}
JavaScript Code: window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
Does anyone have any ideas for what i should work on next. I've made a music player where you can select the song you want. I've made a calculator. I'm relatively new to javascript so.
Hi, I have a button with a class name as below: <input type="button" class="test" value="Add" onclick=Dothis(this);> class test { background-image: url("test.png"); } I would like to disable the button when clicked function Dothis (element) { element.disabled = 'true'; } This is working fine (i'm seeing it as disabled(grayedout)) when i wont set any class. But when i set the class to "test" i'm not seeing any change. Can you please let me know how i can resolve this. Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them, i need 2 things that they'll make: 1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3 what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3. 2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg thanks! Hey, I want javascript to change the background image on hover. This is my javascript: Code: function navOver(obj){
var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
obj.style.background='imgUrl';
}
function navOut(obj){
var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
obj.style.background='imgUrl';
}
and this is the HTML: Code: <li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li> This doesn't work, can anyone help me and say me what to do? Could anyone show me a script that would allow the user whos on my site change the background image from the default color to an image from a URL? And then it would have to save their choice in a cookie. Thanks!
I am wondering if it would be possible to add a Cookie to this code i found, i am wanting the browser to remember the chosen background image and save it when the user closes the browser. Currently when the option is selected it does not remember the choice when you then go back to the page, any help on this would be much appreciated! Many Thanks Code: <script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
</script>
<body id="shelf"> <select id="themes" onChange="changeTheme()"> <option value="images/background1.jpg">Default</option> <option value="images/background2.jpg">Oriental</option> </select> Hello all, I want to set dynamically a div's background image when the page loads, so I have my code like so: javascript code: window.onload = init; function init(){ $(document).ready(function(){ $('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)'); $('#pg1').css('color', 'black'); $('#pg1').css('font-weight', 'normal'); }); } My CSS stylesheet is like so: #buttonsWrapper { position:relative; margin 50px 0px 0px 0px; } .buttons { text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:17px; font-weight:bold; color:#FFF; } #button1 { margin: 31px 0px 0px 0px; } #button2 { margin: -43px 0px 0px 195px; } #button3 { margin: -43px 0px 0px 390px; } #button4 { margin: -43px 0px 0px 585px; } #button5 { margin: -43px 0px 0px 780px; } #button1, #button2, #button3, #button4, #button5 { width:172px; height:33px; /* 33px */ padding-top:10px; text-align:center; } #button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover { background-image:url(../imagenes/buttonNormal.jpg); background-repeat:no-repeat; background-position:top; } My HTML sourcecode is like so: <div id="buttonsWrapper"> <div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div> <div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div> <div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div> <div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div> <div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div> </div> The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong? Thank you so much in advance... I am creating a website and there is an option for the user (after he login to the website, he enters into his workspace page)to upload a background image of his choice to his workspace page. Can the user dynamically upload a background image to his webpage? Can this be done in javascript/php? I would be glad if somebody could help me. |
|||||||