|
JavaScript - Help Needed With Images
I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu.
<head> Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
<body> Code: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p><select name="picture" size="1" onChange="showimage()"> <option selected value="image1.jpg">Option 1</option> <option value="image2.jpg">Option 2</option> <option value="image3.jpg">Option 3</option> </select></p> </form> What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus. For example: Drop down menu number 1 Shoe Color: Black or Red Drop down menu number 2 Shoelace Color: White or Brown Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces. Similar TutorialsHi guys, would appreciate some help here. The below is part of the codes of my image matching programme. The programme loads 2 different series of images in the area and the up/down button is supposed to change each set of the series of images. Currently, the codes only allow one set of the images to be changed. Any idea what can be done so that both set get changes when the up/down key is pressed? Thanks! Codes: public void keyReleased(KeyEvent e) { zoom = false; repaint(); } public void keyPressed(KeyEvent e) { System.out.println("" + e.getKeyCode()); switch (e.getKeyCode()) { case 16: zoom = true; zoomPt = getMousePosition(); repaint(); break; case 39: loadImage(true, true); break; case 40: loadImage(false, true); break; case 38: loadImage(false, false); break; case 37: loadImage(true, false); break; } } public void changeDir(File dir) { this.dir = dir; } public void loadImage(boolean isFileA, boolean increase) { File[] fileList = dir.listFiles(new FilenameFilter() { public boolean accept(File dir, String name) { if (name.toLowerCase().endsWith(".dcm") || name.toLowerCase().endsWith(".dc3") || name.toLowerCase().endsWith(".dic")) { return true; } else { return false; } } }); if (fileList.length < 2) { return; } try { if (isFileA) { a_os = increase? (a_os + 1) % fileList.length : (a_os - 1 + fileList.length) % fileList.length; } else { b_os = increase? (b_os + 1) % fileList.length: (b_os - 1 + fileList.length) % fileList.length; } String ext = fileList[a_os].getName().substring(fileList[a_os].getName().lastIndexOf(".") + 1); Iterator readers = ImageIO.getImageReadersByFormatName(ext); ImageReader reader = (ImageReader) readers.next(); reader.setInput(new FileImageInputStream(fileList[a_os]), true); imgA = ((DICOMImageReader) reader).read(0, null); ext = fileList[b_os].getName().substring(fileList[b_os].getName().lastIndexOf(".") + 1); readers = ImageIO.getImageReadersByFormatName(ext); reader = (ImageReader) readers.next(); reader.setInput(new FileImageInputStream(fileList[b_os]), true); imgB = ((DICOMImageReader) reader).read(0, null); w = Math.max(imgA.getWidth(), imgB.getWidth()); h = Math.max(imgA.getHeight(), imgB.getHeight()); } catch (Exception e) { String fileName; fileName = isFileA ? fileList[a_os].getPath() : fileList[b_os].getPath(); promptError(fileName + " could not be read"); e.printStackTrace(); System.exit(1); } dx = w / 2; dy = h / 2; } public void promptError(String msg) { JOptionPane.showMessageDialog(null, msg, "Error", JOptionPane.ERROR_MESSAGE); } public void keyTyped(KeyEvent e) { } Hey everyone! I'm in the process of creating a portfolio site for my artwork and I'm requesting help. The website has a scalable JQuery background which changes depending on which thumbnail you click. I've uploaded the progress he http://www.aldousmassie.com/newprogress I'm using this code at the moment to scroll through the background: Code: <!-- SCRIPT FOR CHANGING BG ON CLICK -->
<script type="text/javascript">
imgs=Array("img/00.jpg","img/01.jpg","img/02.jpg","img/03.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==3) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<!-- SCRIPT BELOW OVERWRITES SCRIPT ABOVE -->
<script type="text/javascript">
imgs=Array("img/08.jpg","img/09.jpg","img/10.jpg","img/11.jpg","img/12.jpg","img/13.jpg");
var x=0;
function change() {
document.getElementById("bgimg").src=imgs[++x];
if (x==5) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
Unfortunately, the bottom code overwrites the top. Is it possible for each different background image to have their own "set" of images that could be scrolled through onclick? I'd appreciate any tips that point me in the right direction. Thank you. Hi there, I've been searching for an answer to this for the last few days but with no luck, so I thought I'd register here to see if anyone can possibly help. All I've been able to find everywhere for this is examples of changing images when rolling over them or clicking them, and I don't need that. What I need is a bit of javascript that will recognise some image paths on a page and replace those image paths with other ones. It's for an ecommerce website on a certain platform, using a customer reviews section which outputs star images based on the customer's rating. So, the images used (which look awful) are, for example, "sourcehere/stars_5.gif", "sourcehere//stars_4.gif", and so on. Just 5 of them. I want to design my own 5 images, upload those images, and then have the javascript replace the rubbish looking ones on the page with my own images. I thought I'd be able to find something quite easily, but so far all I can find is examples of mouseover events and so on, and I don't need any of that, just the entire image replaced with my own image. Can anyone help please? I'm a beginner with javascript so I'll need it spelled out to me! Thankyou for your time. Please help have a look at the scripts... Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding... Please do tell me if you know the answer to it. Thanks. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}
}
var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";
var o = 100;
var t;
var p = 0;
var f = 1;
function nextImageFading(){
t = setInterval(
function(){
pic.src = img[p];
pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;
if(o<=0){
clearInterval(t);
if(p<img.length-1){
p = p+1;
}
else {p=0;}
pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;
o = 100;
}
},f);
}
</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>
Hi all, I'm a new member of this forum. I need help. My validation code checks for errors while filling out a permission form. If any of the fields are invalid it alerts a javascript box. But it disappears only after 2 mouse clicks. Can anyone help me out? Thank you. prik Hi everyone, Im have a problem here with having a mouseover hilight effect on my table. Can anyone help ? Im not great at js. PHP Code: if($i%2 == 0){$rcolor='#313131';}else{$rcolor='#212121';} $sql=mysql_query("SELECT * FROM ranks_memberxp WHERE xp <=$mem[points] ORDER BY xp DESC LIMIT 1"); $rank=mysql_fetch_assoc($sql); $sql=mysql_query("SELECT color FROM member_groups WHERE id=$mem[gid]"); $mem_color=mysql_result($sql,0); $out[body].=" <tr style='background-color:$rcolor' height='24' > <td valign='center' width='2%' align='center' background='$config[cellbgx]'><font color='white' size='3'> $i "; if($xp2[xperience_lastupdate] >= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_up.gif' border='0'>"; } else if($xp2[xperience_lastupdate] <= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_down.gif' border='0'>"; } else{ $arrowicon=""; } $out[body].=" </font></td> <td valign='center' width='7%' align='center'><img src='./images/flags/{$mem[country]}_small.gif' border='0' /></td> <td valign='center' width='7%' align='left' background='$config[cellbgx]'><a href='./profile.php?account=$mem[id]'><b><span style='color:$mem_color' size='3'>$mem[name]</span></b></a></td> <td valign='center' width='7%' align='center' background='$config[cellbgx]'><img src='$rank[image]' height='15px' width='15px' title='$rank[name]'/></td> <td valign='center' width='7%' align='center'>$pmerleague $pmerforum</td> <td valign='center' width='7%' align='center'><a href='aim:goim?screenname=$mem[aim]&message=Hello, are you there?'><img border='0' align='absmiddle' src='http://360IcoNs.com/images/aim.gif'></a></td> <td class='tag' valign='center' width='19%' background='http://www.360icons.com/theme/dark-grunge/images/box.png' style=' padding-left:130px;' align='center'>$mem[xbl]</td> <td valign='center' width='7%' align='center'><b>$mem[points]</b></td> <td valign='center' width='8%' align='center'>$online</td> <td valign='center' width='8%' align='center'>$mem[Joined]</td> </tr></text>"; CAN SOMEONE TRY EDIT THAT TO GET IT TO WORK ? I just cant get it.... Hello! I am currently having some troubles finishing my website. www.djbobambo.com. I would like the music to play on every html page but the problem is that when i change a pages the music resets and begins from the beginning. I would like it to continue so when you change from page to page the music keeps playing. Any ideas? Thanks! This is the code i use: Code: <img id="music" onclick="musicfunc()" src="images/buttons/on.png" width="195" height="20" style="float: center; padding-right: 50px; padding-top: 58px;">
<OBJECT id="MediaPlayer" width="1" height="1" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
<PARAM name="URL" value="home.mp3">
<PARAM name="AutoStart" value="True">
<PARAM name="PlayCount" value="9999">
</OBJECT>
<script type="text/javascript">
var musicstat = "1";function musicfunc(){if(musicstat == "0"){document.getElementById ('music').src="images/buttons/on.png";musicstat = "1";document.getElementById("MediaPlayer").setAttribute("URL", "home.mp3");}else if(musicstat == "1"){document.getElementById ('music').src="images/buttons/off.png";musicstat = "0";document.getElementById("MediaPlayer").setAttribute("URL", "");}}
</script>
Hello guys i really need your help please. i need a code that when a button or image is clicked then a div's width and height are changed. Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work. I need a code that when a button is clicked then the div's and the flash's width and height are changed. please have a look at the temp website (http://latinunit.net/temp/ , you will understand where im coming from. on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down. My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file. i have spent 2 days on this little issue i just cant make it work, so please anyone can help me. Hello all, I'm nick3d, from the UK. I'm new to this forum... Anyway... I am struggling with a project, basically what I want is. I want a slide in menu bar to the left of my screen, which is also a floating menu, so it follows my page when scrolled up and down, also, in the menu on the left I want the links to be like this UserCP FAQ Calender etc... Then once link clicked I want this to happen UserCP Change View Edit FAQ Calender, etc. so tabs can be opened, are there any available scripts out there which does all this?? Or could any one point me in the right direction? Hello. I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image) Hi there, I have been told I need to use escape() and unescape() to fix some issues I am having with my Javascript in IE7. I've been fiddling with it for two days now and can't seem to get it working correctly. It would be amazing if someone on here could spare a few minutes to tell me what my code should look like. It already works fine as is in new browsers, but IE7 is the problem! Here's my Javascript (I've removed my efforts at escaping and unescaping, and also blanked my Facebook app ID out with 123456789): Code: <script>
FB.init({
appId:'123456789', cookie:true,
status:true, xfbml:true
});
function shareProduct(captionvar, descriptionvar, picturevar) {
FB.ui({ method: 'feed',
link: 'http://www.facebook.com/rjthompsonmusic?sk=app_123456789',
name: 'RJ Thompson Official Facebook Store',
caption: captionvar,
description: descriptionvar,
pictu picturevar
});
}
</script>
And here is how it is being called: Code: <a href="#" onclick="shareProduct('Illogical Life - Digital Download', 'RJ Thompsons 2006 album "Illogical Life" available for Digital Download from his Facebook Store. Includes the single "Green Eyed", live favourites "Jester" and "Piano Song", and 8 more original tracks. Only £7.49!', 'http://www.rjthompsonmusic.com/facebook/illogical_life_270.jpg')">
Facebook</a>
Would really appreciate any help with this. Many thanks, Chris I am needing to use javascript to show a prompt, and when the user enters a number from 1-12 (1 for each month of the year) it adds it to a new array. Then when the user types "stop" it prints the corresponding months. I'm new to javascript so I am not quite sure how to go about doing it. This is what I have currently, but I don't think it is right. Code: <script type="text/javascript">
var month=['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var selmonth= new Array();
var month2=prompt('Which Month', '');
if (month2==1){
selmonth[0] = month[1];
var month2=prompt('Which Month', '');
}
if (month2==2){
selmonth[1] = month[2];
var month2=prompt('Which Month', '');
}
if (month2==3){
selmonth[2] = month[3];
var month2=prompt('Which Month', '');
}
if (month2==4){
selmonth[3] = month[4];
var month2=prompt('Which Month', '');
}
if (month2==5){
selmonth[4] = month[5];
var month2=prompt('Which Month', '');
}
if (month2==6){
selmonth[5] = month[6];
var month2=prompt('Which Month', '');
}
if (month2==7){
selmonth[6] = month[7];
var month2=prompt('Which Month', '');
}
if (month2==8){
selmonth[7] = month[8];
var month2=prompt('Which Month', '');
}
if (month2==9){
selmonth[8] = month[9];
var month2=prompt('Which Month', '');
}
if (month2==10){
selmonth[9] = month[10];
var month2=prompt('Which Month', '');
}
if (month2==11){
selmonth[10] = month[11];
var month2=prompt('Which Month', '');
}
if (month2==12){
selmonth[11] = month[12];
var month2=prompt('Which Month', '');
}
if (month2=='stop'){
document.write(selmonth.join(" <br> "));
}
else{
alert('Please enter a valid value');
}
</script>
It'd be great if someone is able to help me. Thanks. Hi i have a question and i would really appreciate the help of fellow coders. I came across a certain horizontal jcarousel on the website http://www.goal.com , i would like to know how this was done as i would like to use this type of jcarousel for my websites homepage . i would really appreciate the help of you guys .
Hi parent.document.getElementById("Table").onclick(); The above script works fine in firefox but in internet explorer it doesn't work. When i tried in IE, the session gets killed. HELP me out pls.... Can anyone tell WHY? Thanks in advance. Hi All, Im a total novice with coding other than html/css. I have a video xml which, in which i need a new feature, could you help me with that? Basically my video is being entered with a time of it - for example 30sec. I have start and end trackers firing for the video but now i want to add impression trackers at 25%, 50%, 75%. I managed to do it using specifying seconds for the calls, but it becomes a pain to recalculate seconds for every video. Any ideas I could follow? Thanks, AD I want to insert image instead of those empty boxes.......can someone help me please...... <script type="text/javascript"> document.write("<html><head><title>My PhotoCollage</title></head><body>"); function makeDiv() { var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var wh = 25 + Math.floor(Math.random()*444); var lr = (Math.random()<.5) ? "top":"right"; var bw = 1 + Math.floor(Math.random()*12); var bs = (Math.random()<.5) ? " solid":"dotted"; var dc = (Math.random()<.5) ? "Dog" : "Cat"; var Img = Math.floor(Math.random()*256); document.write("<div style=\"float: "+lr+";"+ "width: "+wh+"px;"+ "height: "+wh+"px;"+ "border: rgb(" + g + "," + b + "," + r + ") "+bw+"px "+bs+";"+ "background-color: rgb(" + r + "," + g + "," + b + ");"+ "image: "\">"+dc+ "</div>"); } var i; var count = Math.floor(Math.random()*100) + 5; for (i=0; i<count; i++) makeDiv(); document.write("</body></html>"); </script> Hey everyone....I just started learning how to use Javascript and I have a problem.... I have an exercise in which I have to validate a form and write the info of all the fields in a textarea by pressing the submit button.....and I just can't do it. Code: <html>
<head>
<script language="javascript" type="text/javascript">
var radio_selection="";
function ValMode(){
Empty(myForm.name);
Empty(myForm.addr);
Empty(myForm.city);
Empty(myForm.mail);
radioButtons();
Empty2(myForm.multi);
return false;
}
function Empty(x){
if ((x.value.length==0)||(x.value==null)){
alert("Empty field");}
}
function Empty2(x){
if ((x.value==null)){
alert("Select an option");
}
}
function radioButtons() {
if (radio_selection=="")
alert("\nYou must check one of the radio buttons.");
}
</script>
</head>
<body>
<big><b>Example Form</b></big><br><br>
<b>The form</b><br>
<form name="myForm" onsubmit= "return ValMode();" >
Name <input type="text" name="name" size=30><br>
Address <input type="text" name="addr" size=30><br>
City <input type="text" name="city" size=30><br>
E-mail <input type="text" name="mail" size=30><br>
Room Type<br>
<input type="radio" name="personnumb" onClick="radio_selection='One person'">For One person<br>
<input type="radio" name="personnumb" onClick="radio_selection='For Two'">For Two<br>
<input type="radio" name="personnumb" onClick="radio_selection='For three'">For three<br>
<input type="radio" name="personnumb" onClick="radio_selection='Family suite'">Family suite<br>
How did you learn about us?<select name="mutli">
<option selected value="">--Select--
<option>From friend
<option>By chance
<option>Search engine
<option>Advertisement
</select><br>
I'd like additional service as: <br>
<input type="checkbox" name="veg">Vegetarian<br>
<input type="checkbox" name="hand">Handicap<br>
<input type="checkbox" name="allerg">Allergic to various substances<br>
<input type="checkbox" name="pet">Pet owner<br>
<input type="submit" value="submit form"><br>
<input type="reset" value="reset"><br>
<textarea cols=30 rows=10 id="textarea" name="textarea" >When you hit 'Submit' the user input will be written to htis textarea.</textarea>
</form>
</body>
</html>
Here is my code.I left out my sorry efforts of influencing the textarea. Any suggestions? Okay, Im hoping people good with Javascript read this because I need help! Theres several redirectes required, but if it could be 1 script that I could put one 1 html page, that would be amazing (if it is possible). I need the site to: 1. Upon going to site, determine if it is a mobile browser. If so, send visitors to mobile site automatically. If not then contninue to step 2. 2. Verify that users can view Flash. If yes check connection speed: A. Send above 60kbits/sec to flash site B. If less send users to html site. 3. For those users that are left, (they can't view flash, and are not using a phone), send them to the html site. I have bolded the 3 version of the site I have. Please include all code needed, as Im a noob at Javascript programming (explanations on what the lines do would be nice). Thanks Chris Theres several redirects probably required, but if it could be 1 script that I could put one 1 html page, that would be amazing (if it is possible). I need the site to: 1. Upon going to site, determine if it is a mobile browser. If so, send visitors to mobile site automatically. If not then continue to step 2. 2. Verify that users can view Flash. If yes check connection speed: A. Send above 60kbits/sec to flash site B. If less send users to html site. If they cannot view Flash, head to step 3 3. For those users that are left, (they can't view flash, and are not using a phone), send them to the html site. I have bolded the 3 versions of the site I have. Please include all code needed, as Im a noob at Javascript programming (explanations on what the lines do would be nice). Thanks Chris Not having a good day...plz help make it WAY better..... I have a script that works good, but it says undefined underneath, this must mean an error. But I cant work out how to get rid of it. This is the html it is a transistional XHTML doc type. Code: <div id="slidedom"> <script type="text/javascript" src="js-files/slider.js"></div></script> Then I have the js file which I will have to post all of as I am not sure of the error bit. Code: var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['images/sign-1.gif']
variableslide[1]=['images/sign-3.gif']
variableslide[2]=['images/sign-4.gif']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth='188px' //set to width of LARGEST image in your slideshow
var slideheight='60px' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#FFF'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
I have taken out the credit, as I have changed it a bit, but will reinstate it later on. All I really need to know is how to define it in the XHTML maybe. Can anyone help? |
|||||||