|
HTML - Is It Possible To Do This With Html Or Javascript?
I want to have a similar feature that this page has http://dtlr.com/shoes/shoes.html
only the part that has the 4 thumbnails of the cropped shoes and then the larger image of the shoe next to it. Is this possible to build with html or javascript or is advanced css or something else needed? thanks Similar TutorialsSo I want to make an image that has mouseover tables that pop up. This is what the code looks like now: Code: <html>
<table>
<tr><td><img src= "pic.bmp" usemap="#mapareas"/></td></tr>
</table>
<map NAME ='mapareas'>
<script language='JavaScript' type='text/javascript'>
function show(id)
{
document.getElementById(id).style.visibility='visible';
return true;
}
function hide(id)
{
document.getElementById(id).style.visibility='hidden';
return true;
}
</script>
<area shape = "rect" coords="0,0,100,100" title="one" onmouseover='javascript:show('one') onmouseout='javascript:hide('one')>
<area shape = "rect" coords= "150,0,250,100" title="two" onmouseover='javascript:show('two') onmouseout='javascript:hide('two')>
<area shape = "rect" coords= "0,150,100,250" title="three" onmouseover='javascript:show('three') onmouseout='javascript:hide('three')>
<area shape = "rect" coords= "150,150,250,250" title="four" onmouseover='javascript:show('four') onmouseout='javascript:hide('four')>
<area shape = "default" title="The Rest">
</map>
<table border=0 cellPadding=0 cellSpacing=1 id='one' style='position:absolute; left:10px; top:120px; background:lightGrey; visibility:hidden'>
<tr><td>ONE</td></tr>
</table>
<table border=0 cellPadding=0 cellSpacing=1 id='two' style='position:absolute; left:10px; top:120px; background:lightGrey; visibility:hidden'>
<tr><td>TWO</td></tr>
</table>
<table border=0 cellPadding=0 cellSpacing=1 id='three' style='position:absolute; left:10px; top:120px; background:lightGrey; visibility:hidden'>
<tr><td>THREE</td></tr>
</table>
<table border=0 cellPadding=0 cellSpacing=1 id='four' style='position:absolute; left:10px; top:120px; background:lightGrey; visibility:hidden'>
<tr><td>FOUR</td></tr>
</table>
</html>
everything is ok when the page is first loaded, but when I try the mouseovers, firefox's error console gives me this message: "syntax error javascript:show(" and "syntax error javascript:hide(" Can someone help me figure out what is going wrong? Thanks hi, I'm not sure if its javascript that does it or any other language, but I being googling an cant find it.I am building a site and wanna create a "question sign" ? that when users hover over it , a dialogue box appears explaining what it is.I'm sure most of us have seen it on some site or the other. what I am looking for is like http://www.alexa.com/siteinfo/linuxquestion.org where it says,"Alexa traffic rank" and you hover over the question sign.Thats exactly what I want Can I get some help or links to text on how to create one? Thank you Hi All, This doesn't completely relate to HTML, I am more asking questions about Javascript but are related to HTML and CSS. Anyways here are my questions: 1 - Can you create a javascript file (.js) with out using HTML? If so how would you view this file? 2 - Can you link a CSS file to a Javascript file? 3 - Is there a certain program which is dedicated to view/making Javascript files? 4 - Is it legal to call a program that I make JavaScript Beam? and have copyrights to the name JavaScript Beam? If that is illegal then would it be legal (inclduing copyrights) to call the program I make JS Beam? Thanks here just i load one image into the page, so how to change that into a button? i want to change help_button.jpg into button function changeSrc() { document.getElementById("temp1"); document.getElementById("choice1"); //var img = new Image(); //img.src="template_bg.jpg"; //document.body.appendChild(img); } </script> <body onload="changeSrc()"> <div id="apDiv1"><img id="temp1" align="middle" src="template_bg.jpg" width="694" height="566" /> <div id="apDiv2"><img id="choice1" align="middle" src="help_button.jpg" width="107" height="98"</div> </div> just i load one template in the page, and i create one button in that template, but when i reduce the size of the page, the template will move but the button will exist, i mean that will be constant... how to avoid that? Why can't this HTML Code: HTML Code: <table class='tableborder' cellpadding='6' cellspacing='1' border='0' width='100%'><tr><td class='maintitle' colspan='3' style='text-align:center'><a href='/index.php?showtopic='+ topicid +'' title='View the thread'>'+ maintitle +'</a></td></tr><tr><td align='center' class='row2' border='0'>Winner's Avatar</td><td align='center' class='row2' border='0'>Winner's Entry</td><td align='center' class='row2' border='0'>Winner's Prize</td></tr><tr><td align='center' class='row4' border='0'><a href='/index.php?showuser='+ userid +''><img src=''+ avatar +'' border='0' alt=''+ username +''s Avatar' /></a></td><td align='center' class='row3' border='0'><img src=''+ signature +'' alt=''+ username +''s Entry' /></td><td align='center' valign='middle' class='row4' border='0'><fieldset class='fieldset'><legend>Prize</legend><div><b>Name:</b> <a href='/index.php?showuser='+ userid +''>'+ username +'</a></div><div><b>Prize:</b> '+ prize +'</div><div><b>Admin Rating:</b> <img src=''+ ratimg +'' alt=''+ opinion +'' /></div><div><a href='/index.php?showtopic='+ topicid +''>Click here to visit the thread.</a></div></fieldset></td></tr></table> Go into JavaScript like this: HTML Code: <script>
var topicid = ''; /* Something in here. */
var maintitle = ''; /* Something in here. */
var userid = ''; /* Something in here. */
var avatar = ''; /* Something in here. */
var username = ''; /* Something in here. */
var signature = ''; /* Something in here. */
var prize = ''; /* Something in here. */
var ratimg = ''; /* Something in here. */
var opinion = ''; /* Something in here. */
document.write('<table class='tableborder' cellpadding='6' cellspacing='1' border='0' width='100%'><tr><td class='maintitle' colspan='3' style='text-align:center'><a href='/index.php?showtopic='+ topicid +'' title='View the thread'>'+ maintitle +'</a></td></tr><tr><td align='center' class='row2' border='0'>Winner's Avatar</td><td align='center' class='row2' border='0'>Winner's Entry</td><td align='center' class='row2' border='0'>Winner's Prize</td></tr><tr><td align='center' class='row4' border='0'><a href='/index.php?showuser='+ userid +''><img src=''+ avatar +'' border='0' alt=''+ username +''s Avatar' /></a></td><td align='center' class='row3' border='0'><img src=''+ signature +'' alt=''+ username +''s Entry' /></td><td align='center' valign='middle' class='row4' border='0'><fieldset class='fieldset'><legend>Prize</legend><div><b>Name:</b> <a href='/index.php?showuser='+ userid +''>'+ username +'</a></div><div><b>Prize:</b> '+ prize +'</div><div><b>Admin Rating:</b> <img src=''+ ratimg +'' alt=''+ opinion +'' /></div><div><a href='/index.php?showtopic='+ topicid +''>Click here to visit the thread.</a></div></fieldset></td></tr></table>')
</script>
Hey Team I am New to the boars this is my first html/java script code i wrote.. but it doesnt wan work could some body see wr my mistake is .. thx HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.1 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>Reservation Form</title>
</head>
<body>
<form action="res.php" method="post" name="pricecheck">
<input type="text" value="Limousine" disabled="disabled" />
<br>
<table width="352" border="3" cellspacing="1" cellpadding="3">
<tr>
<td><strong>Party size:</strong></td>
<td>
<select name="pasn" id="pasn" size="1">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td><strong> Trip Type:</strong></td>
<td>
<select name="tt" id="tt" size="1">
<option selected="">Select One</option>
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
<option value="Land&Sea/Sea&Land">Land&Sea/Sea&Land</option>
</select>
</td>
</tr>
<tr>
<td><strong>Transfare type</strong></td>
<script type="text/javascript">
<td>
if(tt="One Way")
{
<select name="trant1" id="trant" size="1">
<option>Select One</option>
<option value="12">MCO To Disney</option>
<option value="13">Disney To MCO</option>
<option value="14">MCO To Cruis</option>
<option value="15">Cruis To MCO</option>
<option value="16">Disney To Cruis</option>
</select>
}else if (tt="Round Trip")
{
<select name="trant2" id="trant" size="1">
<option>Select One</option>
<option value="17">MCO To Disney To MCO</option>
<option value="18">MCO To Cruis To MCO</option>
<option value="19">Disney To Cruis To Disney</option>
<option value="20">Dsiney To Cruis To MCO</option>
}else (tt="Land&Sea/Sea&Land")
{
<select name="trant3" id="trant" size="1">
<option>Select One</option>
<option value="21 ">MCO To Disney to Cruis To MCO</option>
<option value="22">MCO To Cruis To Dsiney to MCO</option>
}
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
thx again iehab ********* okay made a little changes still not work.. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.1 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>Reservation Form</title>
</head>
<body>
<form action="res.php" method="post" name="pricecheck">
<input type="text" value="Limousine" disabled="disabled" />
<br>
<table width="352" border="3" cellspacing="1" cellpadding="3">
<tr>
<td><strong>Party size:</strong></td>
<td>
<select name="pasn" id="pasn" size="1">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
</tr>
<tr>
<td><strong> Trip Type:</strong></td>
<td>
<select name="tt" id="tt" size="1">
<option selected="">Select One</option>
<option value="One Way">One Way</option>
<option value="Round Trip">Round Trip</option>
<option value="Land&Sea/Sea&Land">Land&Sea/Sea&Land</option>
</select>
</td>
</tr>
<tr>
<td><strong>Transfare type</strong></td>
<td>
<script type="text/javascript">
var trant = array("MCO To Disney","MCO To Disney","MCO To Cruis","Cruis To MCO","Disney To Cruis","MCO To Disney To MCO","MCO To Cruis To MCO","Disney To Cruis To Disney","Dsiney To Cruis To MCO","MCO To Disney to Cruis To MCO","MCO To Cruis To Dsiney to MCO")
if(tt="One Way")
{
for (i=0; i<=4; i++);
document.write(<select name="trant[i]">tran[i]</select>);
}else if (tt="Round Trip")
{
for (i=5; i<=8; i++);
document.write(<select name="trant[i]">tran[i]</select>);
}else (tt="Land&Sea/Sea&Land")
{
for (i=9; i<=10; i++);
document.write(<select name="trant[i]">tran[i]</select>);
}
</script>
</td>
</tr>
</table>
<br>
<input name="Submit" type="submit" value="Get Price>>" />
<input type="reset" name="Reset" id="button" value="Reset">
</form>
</body>
</html>
K so I'm making my brother an inventory website that leads to a digital order sheet. On the order sheet, it has a dropdown of the items he has in the database. It's supposed to show the quantity of what he has in stock, but here's the thing: In this database, there are two tables, called Dishes, and Cables. These two tables are assigned to 1 id, so that I can display them in <td id = 'quantity'/>. The problem is, it displays the Cables only, but I want it to be so that if I select one of the dishes, it selects the quantity for the dishes, and if I select one of the cables. Here's the code I have. Code: <html>
<head>
<script type="text/javascript" >
var data = null;
var data2 = null;
function GETSTUFF(stuff) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', stuff, false);
xmlhttp.send();
return xmlhttp.responseText;
}
function buildList() {
data = eval('('+ GETSTUFF('inventory_2.php') +')');
console.log(data);
for (var i=0;i<data.length;i++) {
document.getElementById('materials').innerHTML += '<option onclick="showQuantity(\''+ data[i]['Quantity'] +'\'">'+ data[i]['Supplier'] +'</option>';
}
data2 = eval('('+ GETSTUFF('inventory_21.php') +')');
console.log(data2);
for (var i2=0;i2<data2.length;i2++) {
document.getElementById('materials').innerHTML += '<option onclick="showQuantity(\''+ data2[i2]['Quantity (Boxes)'] +'\'">'+data2[i2]['Type'] +'</option>';
}
}
function showQuantity() {
var supplier = document.getElementById('materials').options[document.getElementById('materials').selectedIndex].value;
var type = document.getElementById('materials').options[document.getElementById('materials').selectedIndex].value;
var amount = 0;
var amount2 = 0;
for (var i=0;i<data.length;i++) {
if (data[i]['Supplier'] == supplier) {
amount = (data[i]['Quantity']);
}
}
document.getElementById('quantity').innerHTML = 'Quantity : '+amount;
for (var i2=0;i2<data2.length;i2++) {
if (data2[i2]['Type'] == type) {
amount2 = (data2[i2]['Quantity (Boxes)']);
}
}
document.getElementById('quantity').innerHTML = 'Quantity (Boxes) : '+amount2;
}
</script>
</head>
<body onload="setTimeout('buildList()' ,100)"/>
<center>
<img src="images.jpg" width=125px height=125px/>
<br>
<font size="8" color="grey" face="purisa">Home </font> <font size="8" color="red" face="purisa"> Communications</font>
<br>
<font size="5" color="grey" face="purisa">Order </font> <font size="5" color="red" face="purisa"> Sheet</font>
<br>
<table border="3" width="100%">
<tr>
<th>Material:</th>
<th>Quantity in stock:</th>
<th>Quantity needed:</th>
</tr>
<tr>
<td>
<select id="materials" name= "" onchange = "showQuantity()">
<option disabled>Select</option>
</select>
</td>
<td id="quantity">
</td>
<td>
<form>
<input type = "quantityNeeded" />
</form>
</td>
</tr>
</table>
<br>
<input type = "button" value="Submit"/>
</center>
</body>
</html>
I know the if statement involves selectedIndex, but I can't figure it out. Please help. Hey everyone, After quite a bit of puzzling through trial and error, I've finished this comment banner for my Entertainment firm (www.myspace.com/honorlifeent) to use on MySpace. I cut 5 images up in an image map and used roll overs for the 3 buttons. The problem is, when I enter the HTML coding in BlueVoda website builder and click on preview, it comes out perfectly. However, when I enter the same HTML coding on MySpace it shows the images all tossed about with the coding simply written inbetween them. This is how the banner is supposed to look (the highlighted 'add to friends' is the rollover image that appears when the cursor moves over it): And this is how the banner comes out on MySpace: Does anybody know why the banner messes up like this? Does MySpace have restrictions on the type of coding you can use or such? Or is there just something wrong in my coding (even though it shows up perfectly with BlueVoda)? Any help at all is greatly appreciated. If anybody needs to have a look at the coding before being able to answer, here's the coding: <HTML> <center> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table id="Table_01" width="335" height="115" border="0" cellpadding="0" cellspacing="0"> <tr><td colspan="4"> <img src="http://i264.photobucket.com/albums/ii191/thecica/top.jpg" border="0" alt="Photobucket"></a> </td></tr><tr><td> <img src="http://i264.photobucket.com/albums/ii191/thecica/rightcorner.jpg" border="0" alt="Photobucket"></a> </td><td> <HEAD> <script language="javascript1.1"> <!-- a674=new Image a674.src="http://i264.photobucket.com/albums/ii191/thecica/visitpage-normal.jpg" a27=new Image a27.src="http://i264.photobucket.com/albums/ii191/thecica/visitpage-hover.jpg" //--> </script> <script> <!-- function filter(imagename,objectsrc){ if (document.images) document.images[imagename].src=eval(objectsrc+".src") } //--> </script> </HEAD> <BODY> <a href="http://www.myspace.com/honorlifeent" onmouseover="filter('a337','a27')" onmouseout="filter('a337','a674')"> <img src="http://i264.photobucket.com/albums/ii191/thecica/visitpage-normal.jpg" name="a337" border=0 width=68 height=30></a> </A> </BODY> </td><td> <HEAD> <script language="javascript1.1"> <!-- a21=new Image a21.src="http://i264.photobucket.com/albums/ii191/thecica/visitgroup-normal-1.jpg" a881=new Image a881.src="http://i264.photobucket.com/albums/ii191/thecica/visitgroup-hover-1.jpg" //--> </script> <script> <!-- function filter(imagename,objectsrc){ if (document.images) document.images[imagename].src=eval(objectsrc+".src") } //--> </script> </HEAD> <BODY> <a href="http://groups.myspace.com/SAurban" onmouseover="filter('a440','a881')" onmouseout="filter('a440','a21')"> <img src="http://i264.photobucket.com/albums/ii191/thecica/visitgroup-normal-1.jpg" name="a440" border=0 width=68 height=30></a> </A> </BODY> </td><td> <HEAD> <script language="javascript1.1"> <!-- a484=new Image a484.src="http://i264.photobucket.com/albums/ii191/thecica/Addtofriends-normal.jpg" a412=new Image a412.src="http://i264.photobucket.com/albums/ii191/thecica/Addtofriends-hover.jpg" //--> </script> <script> <!-- function filter(imagename,objectsrc){ if (document.images) document.images[imagename].src=eval(objectsrc+".src") } //--> </script> </HEAD> <BODY> <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=301232467&MyToken=9164cd11-6167-460c-b9d2-d5443311d730" onmouseover="filter('a705','a412')" onmouseout="filter('a705','a484')"> <img src="http://i264.photobucket.com/albums/ii191/thecica/Addtofriends-normal.jpg" name="a705" border=0 width=83 height=30></a> </A> </BODY> </td></tr></table> </center> </HTML> I have an embedded flash element and calls on a URL for it's content. Code: <embed flashvars="www.url.com"........> The URL I need I have as a variable in some javascript in the header. How can I set flashvars to be the variable I need? Hello, I would like to put the following Javascript into some of my posts on my Message Forums, but the Invision Boards don't allow javascripts to execute. Therefore I can put only HTML code. Code: <script language="JavaScript1.2">
//Disable select-text script (IE4+, NS6+)
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
Any help will much appreciated! While in a popup, can you click a link and have another popup (with its own properties) replace the existing one? Example: Let's say I have a thumbnail page for a photo gallery. I click the first thumbnail, which then opens a popup html page with a larger image and some other text. Then, there are arrows in the popup. When the user clicks the arrows, I want the popup to reload with new dimensions to show the new image. Here's the page I am working on: http://www.ario.cc/sculptures.html Hi. On my website I have some HTML buttons that don't do anything. There is a read only blank text box underneath that the user cannot input things into. Is there some sort of javascript I can use so that when a certain button is clicked, writing that I have specified will appear in the text box? Thanks P.S Also if you could tell me how to do a link that when clicked all the text will be selected at once that would be great I'm an amateur web site builder and since upgrading to Flash CS3 I've ran into a few problems, mostly with the way the new flash publishes the html files. They now added a javascript file that accompanies the html file to apparently assist in the loading of the flash file. What I'm trying to do is add a script to the html file that will resize the window based the users screen resolution. I've used scripts in the past to do this, but for some reason they won't work with this new html file. I'm assuming the javascript file plays a part in this, correct me if I'm wrong. It would be great if someone could help me with a script that would allow for the html file to resize the browser window based on the users screen resolution, or something similar to that. I've included the html and javascript file for you to look at. Click here to view the project I'm working on. Any help is greatly appreciated. Thank you, Dustin Code: function send_onclick(frmName)
{
var bolSubmit;
bolSubmit = true;
if (frmName.email.value == "")
{
alert("You must enter an email address");
bolSubmit = false;
}
if (bolSubmit == true)
{
frmName.submit(frmName);
}
}
</script>
</head>
<body>
<form name="frmName" method="post" action="validate.asp">
Enter your name in the text box. If nothing is entered, a warning <br />
message will be displayed. Only when you enter something into the <br />
text box will the page be submitted. <br /><br />
Please enter your name : <input type="text" name="email" size="20" /><br />
<input type="button" name="butSent" value="Do it" onclick="return send_onclick(frmName)">
</form>
</body>
</html>
Hi there, I would like to know the purpose of having var bolSubmit in the code above. Also, why is it that "form name" allows my code to work even though there is a warning stating that it is outdated, but when I change it from "form name" to "form id", it does not complain of the warning anymore, but instead my code does not work. Please advise. Hi All... In my application i'm using menu... when i click the menu item particular page will load in the center Frame. Problem is it takes bit time... now i want to show a masking (message to let the users know that page is loading) ( As showing in the Image ) how to do this in Html or in Javascript Thank you........ Hi again guys, I have a new problem this time! On this page on my website: http://www.modular9.co.uk/artists.html I have it that when you rollover a link it changes from the artist's name to the collective name and back again. Obviously this causes a few problems such as the length of 'modular9' is shorter than most names so because they jump up a line when it is rolled-over the whole script freaks out and you get a mess. I was just wondering if you knew of any other better script that would keep the same dimensions of the original text or some other idea you could share? My script for this is: <a href="#" class="links" onclick="MM_openBrWindow('artists/richardcook.html','modular9','scrollbars=yes,width=457,height=600')" onMouseOver="this.innerHTML = 'modular9';" onMouseOut="this.innerHTML = 'richard cook';">richard cook</a> Highlighted red is the main rollover change. Any help/idea would be most appreciated! Thanks again Richard Hey guys i want to create a tree view by using html and java script , i tried lot but failed . So can u help me ?? it would be great if u will provide with certain code to build it Thanks Hey, I'm trying to pass a variable from some HTML code to JavaScript and I'm having some trouble. For example: HTML Code: <form name ="columnList" onchange="submitForm(this);">
Column: <c:forEach var="columnitem" items="${columns}">
<c:if test="${columnitem.name != this.document.columnList.name}">
<input type="checkbox" name="selectedColumns" id="${columnitem.name}" value="${columnitem.name}">${columnitem.name} </input>
<script type="text/javascript" language ="JavaScript">
var col = document.columnList.columnitem.name;
setColumns(col);
</script>
</c:if>
</c:forEach>
I'm trying to get the columnitem name from the HTML portion to the script. And I know that columnitem.name works for the check boxes. Can anyone help me out? Greetings Please is there a way to execute these two scripts bellow, one of them is html and the other is javascript, with one click: <input type="button" onClicK="top.clearCountings(), top.clearIt()" value="CLEAR TABLES AND INTERNAL COUNTERS"> <a href="lottoDown.html" target="lottoDown">CLEAR RIGHT FRAME</a> Both belong to this: http://2move.me.uk/londoner.html Regards |
|||||||