|
JavaScript - Beginner - Onclick Cmd W/ Linking Text To Pics
Im currently working on a project for class and have been directed to use Javascript for what im looking to do.
Im a beginner when it comes to coding w/ javascript. Over the last couple days I've spent good time reading and practicing tutorials but have yet to do something I imagine is very basic for what I want to do. At the moment, im looking to insert text into a webpage, that links to images. The images, ideally will layer on top of each other (Multiple images can be shown based on the "text" which activates it) Images shown, if done what im looking for, will have a transparent background to view images set behind one another. I've spent a couple hours looking up code through google, found similiar code which i've tried to manipulate to do what I want. I have yet to put something successful together. Was hoping I could look upon experience programmers to help me out by pointing me in the right direction. Im willing to do the work, just looking for that guidance Similar TutorialsHello and thanks for letting me on this forum! Im pretty new to JScript and I am still getting used to it all. I am trying to make a Website that allows values to be selected from one form, transferred to the next form as a summary and then completed. The values are sent to the page fine but my Validation is broken. Here is my LINK code In the Form Code: <form id="Tickets" onsubmit="return ValidateForm()" action="Details.html"> And in the Submit Button Code: <input type="submit" id="OrderTickets" value="Order Tickets" onclick="return ValidateForm()" > My validation is as follows Code: <script type = "text/javascript">
function ValidateForm() {
if( document.getElementById('DepartingStation').selectedIndex == " ")
{
alert( "Please provide a Departing Station!" );
document.getElementById('DepartingStation').focus() ;
return false;
}
if( document.getElementById('ArrivingStation').selectedIndex == " ")
{
alert( "Please provide an Arriving Station!" );
document.getElementById('ArrivingStation').focus() ;
return false;
}
var Depart = document.getElementById('DepartingStation').value;
var Arriv = document.getElementById('ArrivingStation').value;
if( Depart==Arriv){
alert( "Train cannot depart and arrive at the same station!" );
return false;
}
if ( document.getElementById('ReturnTravel').checked=true; {
var valueDate = document.getElementById('OutwardDate').value;
if ( valueDate== null || valueDate== '')
{
alert('Please provide an Outward Travel Date!');
return false;
}
}
var valueRetDate = document.getElementById('ReturnDate').value;
if ( document.getElementById('ReturnTravelType').checked==true && (valueRetDate== null || valueRetDate== '' ))
{
alert('Please provide a Return Travel Date!');
return false;
}
}
Id appreciate any help anyone can share on this! Thanks. Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. hello i've followed this javascript and i'd like to link the text to one of my page.How do i place the ahref tag in the script.Appreciate your help http://www.javascriptkit.com/script/script2/neontext.shtml I have a html form that uses AJAX to display an XML file for a live search box to appear underneath the search box while the user is typing. I want to be able to click on the links and for the data to be entered into the search box, kinda like on Google's main page. Someone mentioned to be about moving the text using javascript onclick, can anyone help with this?
Hi im new to this site and im a begginer, so forgive me for any grammatical errors please. How would I go about running a program onclick or onblur and displaying the result on same page without it changing? I have searched this forum for similar queries & have come up with this http://jsfiddle.net/defencedog/P33FR/ I don't know why this ain't working I would like to have a text link do 2 things: 1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you Hi guys, I'm new to javascript but cannot figure out a way to do something or even if its possible. On the site there is an image with some descriptive text to the side, here is the work in progess link to the site for an idea www.igrey.co.uk/nbe I want to be able to click the arrows and the text and images change so you can scroll through a couple of different projects Any help or advice would be greatly appreciated All the best, Ian This is hopefully a simple fix and I hope someone can help me out, I'm pretty new at coding. I have a form on an html page and I want to make it so when a button is clicked, it adds one to the input to the right of it, and when a button to the right of the input is clicked, it will delete one to the left of that button. I don't want to resort to making a new function for each and every form, because there will be a lot. Here is the form and input parts: Code: <form name="calculate"> <input type="button" onClick="add()" /> <input name="result" type="input" readonly="readonly" value="0" /> <input type="button" onclick="sub()" /> </form> Here is what the function code looks like: Code: function add()
{
var add = 1 * calculate.name.value;
add = add + 1;
calculate.name.value = add;
}
function sub()
{
var add = 1 * calculate.name.value;
add = add - 1;
calculate.name.value = add;
}
Note: where I called the calculate.name.value, that obviously doesn't work, and I need some way, rather than making multiple functions and changing the name part, to be able to call to a name near the button, if at all possible. Any and all ideas are appreciated, Thanks! I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this? Also is there a way of tracking how many clicks each person gets? I'd really appreciate any help you guys can give me on this Hi, This button changes the button text when clicked, but it is always calling the same function. How to make the button depending on the button text to call different functions on onclick? [CODE] <script type = "text/javascript"> function button_switch(){ if (document.switch_form.switch_b.value == "Adam"){ document.switch_form.switch_b.value="Eva"; } else{ document.switch_form.switch_b.value = "Adam"; } } </script> <form name = "switch_form"> <input type = "button" name = "switch_b" id = "switch_b" value = "Adam" onclick = "button_switch()" /> </form> [CODE] Happy Turkey Day!! I am new to JavaScript and I downloaded a code for image mouse over effects. It works exactly how it's supposed to except when you first load the page, the images are not there. They do not appear and function until you actually roll the mouse over them. Here is the script and the link... any help would be greatly appreciated! Thank you Link Code: <script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
</script>
<img alt="Default Image" name="pic" src="default.gif"
height="100" width="150" /><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
href="your-page.html"><img alt="Button 1" name="a"
src="upbutton1.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
href="your-page.html"><img alt="Button 2" name="b"
src="upbutton2.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
href="your-page.html"><img alt="Button 3" name="c"
src="upbutton3.gif"
style="border: 0px solid ; width: 325px; height: 225px;" /></a>
Hey guys, I have this site http://free-documentaries-online.com . If you go to any documentary page and look under the documentary you will see 'Share this documentary:' like the picture below. I was wondering if you could make all the pictures have a similar size image? facebook.jpg, twitter.jpg, linkedin.jpg, digg.jpg, stumbleupon.jpg, delicious.jpg Here is the code: Code: <a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="freedocosonline">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> <script src="http://www.stumbleupon.com/hostedbadge.php?s=4"></script>
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;">
<img src="http://free-documentaries-online.com/images/delicious.jpg" width="20" height="20" alt="Delicious" title="Add to Delicious!" /></a> <script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggIcon"></a>
<a rel="nofollow" target="_blank" href='http://www.facebook.com/sharer.php?u=http://free-documentaries-online.com/watch/index?watch=<? echo "$foldername"; ?>'> <img border="0" src="../images/facebook.jpg" width="20" height="20"></a> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share"></script></center>
Thanks in advance I want to build functionality like that (see http://www.cymaxstores.com/Common/Pr....aspx?ID=26094) is it possible with only javascript , or ??? I dont have any clue plz help any help would be appreciated Thanks sknaht I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hi there, im wondering if you can help me i need help in finding javascript resources to build my skills and knowledge of Jscript because im a beginner. Please help hello! i have a problem: i want to change the height of my side bar as long as the text in the center of page long, it means when I have for ex 3 news in a page the side bar which have a background color must be increase to fit the long of text(3 news). i think it will do by javascript but i'm not sure! i my question isn't clear please tell me to explane more i really need it, |
|||||||