|
JavaScript - How To Create Multiple Corresponding Text Rollovers
i am creating a header for a webpage. the header has two text menus (no images). the first menu (menu A) is like this:
link 1a / link 2a / link 3a the second menu (menu B) is like this: link 1b link 2b link 3b i would like to use javascript/css to do the following: when you rollover link 1a, three things happen: link 1a changes color, link 1b changes color, and and link 1b adds a line of text (so it reads: link 1b : text 1b) i would also like- and this is where i am having trouble- for the following to happen: when you rollover link 1b, link 1b changes color and adds the additional text, as well as link 1a changes color. it doesn't seem so bad when i write it out here, but i can't figure out how to do it. any help is appreciated. Similar TutorialsGood day Lets say I have a page with 3 thumbnails and one big div. When click in one of the thumbnails the image of it must appear inside the big div. Of course there are 3 images (little ones for the thumbnails) and 3 big images for the real size ones. Script this is simple for me but imposible if I have more than 100 pages within 6 images inside them (3 little and 3 real size for 3 thumnail divs and one single big div). There must be some kind of order to just script the divs of the thumbnail divs and the real size image div in all the pages at ones, otherwise I have to creat ID's to every single div inside every single page! (4 id's to one page and I have more than 100 pages!, this is inpractical because is posible that in the future the pics change, is more than 400 id's) For example: for FIRST.html big div (div id="img001bg") thumb1 div (div id="th_img001" thumb2 div (div id="th_img002" thumb3 div (div id="th_img003" SECOND.html THIRD.html ... HUNDRED.html ... ! There must be some solution using somehow the functions, please help! Thank you to all Hi, i have got this piece of code: Code: var f = [];
var x = 1;
f[0] = function(){alert(x);};
var x = 2;
f[1] = function(){alert(x);};
f[0]();
f[1]();
I would like to display the number 1 at first and then 2. but this code produces number 2 for both alerts. I was able to achieve what i want with "new" constructor when creating functions but this is not a good practice and after all i am passing these functions as an event handler and it cant be done with "new" keyword because it is throwing error. I think there are some solutions with arrays e.g the x would be an array of numbers, but i don't like it. Am i missing something important? Thanks for your replies. Hi, I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function emailRowContent(isSelected, emailAddress, severity)
{
var emailRowObj = document.getElementById('emailRow');
emailRowObj.childNodes[1].childNodes[0].checked = isSelected;
emailRowObj.childNodes[3].childNodes[0].value = emailAddress;
emailRowObj.childNodes[5].childNodes[0].checked = severity;
}
function LoadUp()
{
var emailAddressListObj = document.getElementById('emailAddressList');
var arrayOfEmails = new Array(5);
for (i = 0; i < 5; i++)
{
arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i );
//emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onload="javascript:LoadUp();">
<div id="emailRow" class="emailRowClass">
<div><input type="checkbox" class="checkbox1"></div>
<div><input type="text" class="textfield"></div>
<div><input type="checkbox" class="checkbox2"></div>
</div>
<div id="emailAddressList" class="emailAddressClass"></div>
</body>
</html>
Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike I assumed this is a javascript based text editor because when I turn off javascript it doesn't work. I was wondering how something like this is created. maybe not this exact one, but how would I create something like it. Maybe just a simple editor that changes text size and color.
I tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created! I really dunno what to do. Code: <html>
<head>
<script type="text/javascript">
function getTB(field)
{
var i = document.getElementById("f1").length + 1;
var cmd = "<input type=text name = "+ i + " onfocus=getTB() value = " + i + ">";
document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML + cmd;
document.getElementById(i-2).focus();
}
</script>
</head>
<body>
<form id ="f1">
<input type ="text" value ="hello" name="1" onFocus ="getTB(this)">
</form>
</body>
</html>
how to modify so not every time a new text input created when tried to type in? First, I did this for testing Code: <script type="text/javascript"> <!-- var cururl = window.location.href + "?style=1" document.write(cururl); //--> </script> and it works. It gets the current url of the page and appends ?style=1 then writes out the URL. However getting it as a clickable link is what's stumping me. Code: <script type="text/javascript">
<!--
function goURL()
{
window.location.href + "?style=1"
}
//-->
</script>
<a href="javascript:goURL()">Go There</a>
Doesn't work in my test. As you can probably see, I'm not very well versed in javascript. window.onload = initAll; function initAll() { document.getElementById("Message").onfocus = focusHandler; document.getElementById("Message").onblur = blurHandler; } function focusHandler() { document.getElementById("helpYou").innerHTML = "<span class=\"helpMessage\">Hey " + theName + "You should add Lasting Flash to your Facebook!</span>" } function blurHandler() { var helpMessage = document.getElementById("helpYou").innerHTML = ""; } function nameHandler(frm) { var theName = frm.firstName.value; } Quote: When I insert theName variable within the span the code completely does not work. I am accessing a text field when the user enters his name and then a small pop up later that includes the users name when another field is clicked on. Hello all, I am doing a website project and in that currently I am designing a product page. I have to design add values to text boxes and drag and drop the text boxes in the workspace and delete the text boxes the user does not want and have to draw a graphical line between the text boxes which are in order. I have designed and coded everything except the graphical line part. I am a learner in javascript and Can we draw a graphical line dynamically between the text boxes in the webpage? If we can draw, can anyone let me know the tutorial for that so that I can learn and start coding as I have to submit that project soon. Thank you. hello, I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/> xxxx = random number the page may contain only one text box id=product or more i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box Code: var price = document.getElementById('price').value;
var allElements = document.form1.product;
var len=allElements.length;
if(allElements.length){
for (i = 0; i < len; i++){
allElements[i].value = price;
}
I'm not a javascript expert so i don't know if this code is the right way to accomplish this. Thank you very much for your help <!-- ** Need help completing the javascript in this example ** --> Code: <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> I'm trying to create two array's on this page: http://www.hollywoodfarmer.com Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble. The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (pls ignore the terrible formatting of the 2nd pic). I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables. Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all. Any help would be greatly appreciated. Your forums have gotten me this far! I have the following 3 buttons on my page. I need when on hover on each respective button, the button to light up with a bg image and a slide out rollover in the top direction. How can I achieve this? <div style="padding-left:45px;width:852px;"> <a href=".html" class="Button"> <div style="text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 1</span><br /> </div> </a> <a href="" class="Button"> <div style="margin-left:18px;text-align:center;padding-top:15px;float:left;width:270px;height:45px;background-image:url(images/homeBG.png);background-repeat:no-repeat"> <span id="homeButtonText">Question 2</span><br /> </div> </a> <a href="" class="Button"> <div style="text-align:center;padding-top:15px;float:right;width:270px;height:45px;background-image:url(images/homeBG.png);margin-right:5px;background-repeat:no-repeat"> <span id="homeButtonText">Question 3</span><br /> </div> </a> </div> Say we have an image called imagefile.jpg, which we want to display when the user mouses over an already-displayed image.Now I want to preload more than just one image; for example, in a menu bar containing multiple image rollovers,or if I try to create a smooth animation effect what should i do? I tried the following code but it doesn't work. Please help 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=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="1.jpg"
images[1]="2.jpg"
images[2]="3.jpg"
images[3]="4.jpg"
// start preloading
for(i=0; i<=3; i++)
{
imageObj.src=images[i];
}
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='1.jpg'">
<img name="img01" src="4.jpg"></a>
</body>
</html>
Mainly I want to create the animation effect with the 4 images. Is that possible? <!-- ** Need help completing the javascript in this example ** --> <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> hi ! i would like to write the code for multiple text box select as shown in the link below: http://www.downloadplex.com/Mobile/I...ne_284120.html please see the screen shot 3 Hi there! I need help! Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words. I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet Please help me! Thanks so so much! follow me on twitter - @robyn_90 Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers? (The disjointed rollovers are created using image swap behavior) My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath. Can you please help me with this, here is my complete code 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 type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/fullscreen/1z.jpg','images/fullscreen/2z.jpg')"> <p><img src="images/fullscreen/1z.jpg" alt="HL" name="pic1" width="114" height="102" id="pic1" onmouseover="MM_swapImage('poster','','images/fullscreen/1z.jpg',1)" onmouseout="MM_swapImgRestore()" /> <img src="images/fullscreen/2z.jpg" alt="HL" name="pic2" width="114" height="102" id="pic2" onmouseover="MM_swapImage('poster','','images/fullscreen/2z.jpg',1)" onmouseout="MM_swapImgRestore()" /></p> <p> </p> <p><img src="images/fullscreen/3z.jpg" alt="HL" name="poster" width="500" height="375" id="poster" /></p> </body> </html> [code] First off, I am new here - so, an introduction. My name is David Lubofsky. I am a front-end developer in Chicago, Illinois. I have done numerous JS rollovers before, as well as image rollovers triggered by text links. However, I am having a problem combining the two. The best example I have found of what I am trying to achieve is here - http://theworldcovered.ivyfunds.com (top right area). I have no issue achieving part of this - where the link mouseovers trigger the image swap. My issue is making both the link and the image cause the rollover. The method I use for image swap on text link hover is seen here - http://www.htmlite.com/faq011.php This is what I want, except I want the image to also swap if the image is rolled over, as in the first example. Hope this was clear - I could really use some guidance on this. Thanks all! David HI, I am not very experienced with javascript and got stuck doing the following. I have placed some image rollovers on one of my pages..where when a user rolls over some text links..and image appropriate to that text is showen...when the mouse moves away from the links then a blank image is displayed as a place holder. this is all simple...here is where i am stuck. The place holder has a specific size...but the rest of the images that are displayed when the text is rolled over have different sizes, some are vertical some are hortizontal. i do not want to have to resize every image so that it properly fits the place holder...add the white borders and so on...so that the image is dispalyed properly. Is there a way to have the size be changed for each image...so that the size doesnt get inherited from the place holder, but so that the script applies the size associated with each individual image. example place holder is 20 x 20 image 1 is 100 x 200 image 2 is 200 x 100 the place holder is loaded...when the mouse moves over the first link...image 1 replaces the place holder...but instead of taking on the size of 20x20 it has to be displayed at its own size of 100 x 200... how can i do this? thank you for all of your help Hi there, New to these forums, and to coding websites so be kind . My problem is, when using lightbox2 I press the back button and the rollover remains in the mouse-over position. I can "mouse over' it and then the rollover will disappear, it just seems to get stuck on. I really have no idea what is causing this, and any help would be greatly appreciated. Thanks alot, Joel |
|||||||