|
JavaScript - Href Changing Depending On What Image
hello
i have this code that tags between three images in an certain amount of time and this works fine Code: <script language = "Javascript">
<?php $count_im=1;
$req=mysql_query("select * from banner");
while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
<?php $count_im++;
}?>
</script>
Code: <div class="banner">
<p class="banner_image">
<img src="banner/12.jpg" name="slide" width="290px">
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every ... seconds
setTimeout("slideit()",10000)
}
slideit()
//-->
</script>
</p>
</div>
and i want it also to tag between hrefs too, so tried the following but didnt work Code: <?php $count_im=1;
$req=mysql_query("select * from banner");
while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
var link<?php echo $count_im; ?> =new String()
link<?php echo $count_im; ?>.href="<?php echo $res["banner_title"]; ?>"
<?php $count_im++;
}?>
Code: <div class="banner">
<p class="banner_image">
<a href="" rel="nofollow" target="_blank" name="links">
<img src="banner/12.12" name="slide" width="290px"></a>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
document.a.links.href=eval("link"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every ... seconds
setTimeout("slideit()",10000)
}
slideit()
//-->
</script>
</p>
</div>
anyone can help??? Similar TutorialsI have a form that I am using for several different pages as they are exactly the same... however at the top you must make a choice from the drop down box that then shows the appropriate fields to fill in. Can I make the drop down default to a certain option depending on which page they are coming from? Ok so i'm trying to write a Greasemonkey script to change all the hrefs on a single page. The href by default looks like this: Code: <a href="javascript:get('246154895')" class="postid">ID</a>
What i'm trying to do is make the number from get() appear in stead of "ID". How should i get this done? I started up with this: Code: var posts = document.getElementsByClassname('postid');
for (i=0; i<posts.length; i++) {
//Replacing
}
But i doubt it will work, since there are other items with the class "postid" that aren't related to these tags i'm trying to change. P.S. I'm new to JS so yeah :P Hi coders, I need to achieve two things upon making a selection from a drop down field: 1) Changing the background picture of a cell. 2) Changing the size of a uploaded foreground picture within the same cell. Code: <select name=ADDITIONALINFO> <option value="25 x 25">25 x 25</option> <option value="35 x 35">35 x 35</option> <option value="45 x 45">45 x 45</option> <option value="55 x 55">55 x 55</option> </select> Any guidance how to achieve this is appreciated. I have the index page which contains the menus with hrefs. Now i have to generate the hrefs dynamically and the problem is the menus are created by the plugin so i can edit that file So i was thinking of loading the new url in hidden elemenst and when the page loads then chnage the hrefs of those menus. I want to ask that where on the page should i display the hidden elements so that when the page loads then by using JS i can chnage the href of few menu items I was thinking of doing that on the top of page but that does not look nice to have any element before body hi, have a series of 2 pages. The first is a drop down select box that gathers the state name. Onclick we are using a window.open to open a page with a list of cities for that state. Again using a drop down select box to select the city and then, onclick, we send the user off to the appropriate page based on state/city selection while at the same time updating the 1st (parent) page with a new location.href. Problem is that instead of updating the parent page, it updates the page with the list of cities (the child page). On the first page script we generate the following warning: Warning: XUL box for _moz_generated_content_after element contained an inline #text child, forcing all its children to be wrapped in a block. Source File: chrome://browser/content/browser.xul Line: 0 First page is not generated via javascript but standard html. This happens both locally and when pages are moved to the server (Apache). First page script is as follows Code: <HTML>
<HEAD>
<TITLE>J1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function StateSelect (form) {
Item = form.state.selectedIndex;
Result = form.state.options[Item].value;
window.open('j2.htm?value='+ Result,'myWindow','resizeable=no,resizeable=0,scrollbars=no,scrollbars=0,location=no,location=0,toolbar=no,toolbar=0,directories=no,directories=0,menubar=no,menubar=0,status=no,status=0,copyhistory=no,copyhistory=0,width=300,height=100,left=300,top=300,screenX=300,screenY=300')
}
</SCRIPT>
</HEAD>
2nd page (where user selects city) code is as follows: Code: <SCRIPT LANGUAGE="JavaScript">
function CitySelect (form) {
Item = form.city.selectedIndex;
city = form.city.options[Item].value;
state = document.myform.state.value;
window.open('j3.htm','mywindow3')
setTimeout("Func1()",3000);
}
function Func1()
{
parent.location.href='j4.htm?st='+ state + '&city=' + city,'mywinow2';
}
</SCRIPT>
Ideas on why and what the error (actually a warning) is trying to tell us? Thank you all! Jim Hello Everyone! It's been a while since this thought started to bother me, I would like to create a website that has script which depending on the option chooses the image and merges with the other image. My idea is that someone comes on my website which would be custom carp hair rings. They would have options such as: Hook type Hook size Braid(fishing line) Length of the braid Swivel So depending on the hook they choose different image will appear and depending on the braid and the hook size everything merges together into finished product where the outcome you could clearly see the image of the hook tied with braid and a swivel at the end. This is the image Basically where you see the hook, the customer could select from an option of hooks and it would be replaced by their option, the length of the bread doesn't matter, but it would be nice to have some sort of an indicator to the customer how long it would be, and the last bit is the swivel, depending on the option the customer chooses, he can see the swivel or not. Its like creating your own carp rig, you choose which hook you want, then it appears, you choose which braid you want, it appears and if you want you can have a swivel at the end and you can see how your chosen options looks like in reality. Now I do not ask anyone to do everything for me, all I'm asking is for directions. Is there a script somewhere that I could edit that would achieve my goal, since I have no coding skills but some knowledge it would be nice to get some support along the way. Thank You for you attention Arnoldas Valys Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Hello, I would like some help with a two stage display of thumbnails. I have managed to display all thumbnail product images of my targetId in a scrolling div from the contents of my targetId image folder. I have also managed to display the thumbnail as a larger image in a html image. I would now like to apply a href link to the larger image so that I can display using jsquery lightbox, but I can't figure out what code i need and where it should go. Please help! Code: <head>
<script type="text/javascript">
function replaceImg(path) {
var imgDest = document.getElementById('image');
var imgSrc = path;
imgDest.setAttribute("src", imgSrc);
}
</script>
</head>
<body>
<div class="productimage"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></div>
<div class="gallerypics"><?php
$counter = 0;
foreach (glob("product_images/$targetID/thumb/*.jpg") as $pathToThumb)
{
$filename = basename($pathToThumb);
echo ('<div class="gallerypicsframe"><a href="javascript:replaceImg(\'product_images/'.$targetID.'/'.$filename.'\')"><img src="'.$pathToThumb.'"" width="60" height="90" border="0"/></a></div>');
$counter++;
}
?>
</body>
I came across your forums here and it looked like a great place to get some help, and help is exactly what I need! I have been struggling with this javascript that changes an image and its corresponding useMap. For reference: - All images are the same size and located in the same directory, except the main map image - All images are preloaded (I did this just in case it was an image problem) - The page works fine in Firefox, and fine in IE until it crashes - http://www.forthecode.com/imagemap/untitled.htm The Problem: - When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds. - This even happens in a completely blank page (no other content) Exceptions: - Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem) - Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up! The Javascript function itself: Code: <script language="Javascript">
function changemap(vari){
var vari;
var stoptime;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
}
}
</script>
The image tag and image maps: Code: <img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
<area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');" alt="Mississippi" title="Mississippi">
<area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');" alt="Arkansas" title="Arkansas">
<area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');" alt="Ohio" title="Ohio">
<area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');" alt="Missouri" title="Missouri">
<area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');" alt="Illonois" title="Illonois">
<area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');" alt="Tennessee" title="Tennessee">
</map>
<map name="arkansas">
<area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="mississippi">
<area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="missouri">
<area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
<area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
<area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="kentucky">
<area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="indiana">
<area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="illonois">
<area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="tennessee">
<area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="ohio">
<area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me. Thanks in advance! Hi everyone, So I know enough to make an image change when you click on something, but not enough to do what I want to do. Code: <img name="ImageState" src="Image1.jpg" alt="Image"> <A HREF="javascript:void(0)" onclick="ImageState.src='Image1.jpg'">Link 1</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image2.jpg'">Link 2</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image3.jpg'">Link 3</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image4.jpg'">Link 4</A> <A HREF="javascript:void(0)" onclick="ImageState.src='Image5.jpg'">Link 5</A> The problem is that I want the images to only advance in the proper order. For example, if "Image2.jpg" is currently displayed, I want to make it so that only clicking on "Link 3" will advance it to "Image3.jpg" while the other links are still there but do nothing if you click on them. Can anyone tell me how to do this please? Hello All. I'm trying to create a file upload page with pre-uploading preview, and using JS to change the images src upon selecting a local file. this works great, but unfortunatelly only for some image files, even though files were taken by the same camera,the same size, and created on the same date. I can't figure out for the life of me what is going on. The Code : <script> function changeImage(newSrc) var str = newSrc.toLowerCase(); cImg=document.getElementById("chngImg"); cImg.src=str; </script> <HTML> <BODY BGCOLOR="#FFFFFF"> <FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="UploadScript1.asp" rel="nofollow" target="newWnd"> File 1:<INPUT TYPE=FILE NAME="FILE1" onchange="changeImage(this.value);"> <INPUT TYPE=SUBMIT VALUE="Upload!"> </FORM> <div><img src="oren1.jpg" id="chngImg"></div> </BODY> </HTML> Best Regards Oren Pildus First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript">
<!--Hide from incompatible browsers
/* <![CDATA[ */
function changeText()
{
document.getElementById('link').innerHTML = 'View Smaller Image';
return false;
}
function changeImage()
{
var newImage = new Image();
newImage.src = "images/cottage_large.jpg";
document.getElementById('thumbnail').src = newImage.src;
return false;
}
/**/
/* ]]> */
// Stop hiding from incompatible browsers -->
</script>
</head>
<body>
<h3>Real Estate</h3>
<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
</body>
</html>
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>
Hi, I'm using the following Javascript code to show a div layer depending on the URL Code: <script type="text/javascript">
if (location.href.match(/folder/)) {
document.getElementById("div-layer").style.display="block";
}
</script>
This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example: http://www.domain.com/folder/sub-folder http://www.domain.com/folder/sub-folder2 etc. Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it? Thank you in advance. I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks js code Code: var sel = document.getElementById("sw");
function f1(){
var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
var im = document.getElementById("pic");
im.src = imgs[this.selectedIndex];
}
html code Code: <img id="pic" src="chart1.cgi" /> <select name="sw" id="sw" onchange = "f1()" > <option value="s1">what</option> <option value="s2">whatever 2</option> <option value="s3">whatever 3</option> <option value="s4">whatever 4</option> </select> Greetings. I am trying to create an "image of the day" for a site where the image will change automatically every 24 hours. Currently, I have 30 images in a folder named "petday" (no quotes) and I tried the following code (found in this forum) but I cannot get it to work. Any help or suggestions would be greatly appreciated. On a side note, I am very new to JavaScript and I know there is an easier way to write this but I am not real clear on how to do it. I have been reading the lessons found at W3 schools and I think I can use a switch statement? Is that correct? Code: <SCRIPT Language="JavaScript">
var now = new Date();
var dd = now.getDate();
if (dd==1)
document.write('<img src="petday/image1.jpg">');
else if (dd==2)
document.write('<img src="petday/image2.jpg">');
else if (dd==3)
document.write('<img src="petday/image3.jpg">');
else if (dd==4)
document.write('<img src="petday/image4.jpg">');
else if (dd==5)
document.write('<img src="petday/image5.jpg">');
else if (dd==6)
document.write('<img src="petday/image6.jpg">');
else if (dd==7)
document.write('<img src="petday/image7.jpg">');
else if (dd==8)
document.write('<img src="petday/image8.jpg">');
else if (dd==9)
document.write('<img src="petday/image9.jpg">');
else if (dd==10)
document.write('<img src="petday/image10.jpg">');
else if (dd==11)
document.write('<img src="petday/image11.jpg">');
else if (dd==12)
document.write('<img src="petday/image12.jpg">');
else if (dd==13)
document.write('<img src="petday/image13.jpg">');
else if (dd==14)
document.write('<img src="petday/image14.jpg">');
else if (dd==15)
document.write('<img src="petday/image15.jpg">');
else if (dd==16)
document.write('<img src="petday/image16.jpg">');
else if (dd==17)
document.write('<img src="petday/image17.jpg">');
else if (dd==18)
document.write('<img src="petday/image18.jpg">');
else if (dd==19)
document.write('<img src="petday/image19.jpg">');
else if (dd==20)
document.write('<img src="petday/image20.jpg">');
else if (dd==21)
document.write('<img src="petday/image21.jpg">');
else if (dd==22)
document.write('<img src="petday/image22.jpg">');
else if (dd==23)
document.write('<img src="petday/image23.jpg">');
else if (dd==24)
document.write('<img src="petday/image24.jpg">');
else if (dd==25)
document.write('<img src="petday/image25.jpg">');
else if (dd==26)
document.write('<img src="petday/image26.jpg">');
else if (dd==27)
document.write('<img src="petday/image27.jpg">');
else if (dd==28)
document.write('<img src="petday/image28.jpg">');
else if (dd==29)
document.write('<img src="petday/image29.jpg">');
else if (dd==30)
document.write('<img src="petday/image30.jpg">');
</SCRIPT>
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? 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 would like to change the alignment of an image which currently under div which is under iframe. the page which is called under iframe is readymade html from some other site. I dont have any control on that HTML page which is under iframe. Please tell me how to align image under iframe.
|
|||||||