|
HTML - Curious About This Awesome Website
I just discovered this music website of an aspiring artist. (pretty neat music too)
check the site out he http://jamesblakemusic.com/ Anyways, the menu behaves in a way ive never seen before.. so i went like: "WHOA" when it did what it does (press it, click it, just do it! ) So.. i wanna know how those screens just slide in when pressed. Im talking about the MENU, not the movie at the background. If any pro-coder knows the name of the technique? Of even better; a tutorial.. would mean a lot to me. cheers btw - at first i was like, great.. another neat flash site, ill never manage this XD Similar TutorialsI have a directory with thousands of links. I want to start exceeding 100/links/page, which would put me in "link farm" territory with Google. I want the links to remain live. The site is a directory. How can I establish my site, or code it, so that I won't get into trouble? Thanks very much for your help! Bengo Just wondering if anyone knows of a way to do this, i'm thinking may with <span> or something but not sure. With a link tag like this <a href="home.html" target="frame"> I can open another web page into an iframe but what I want to do is also change some text that's not in the frame. It's kinda like a title for the frame that will be above it. I have played around with giving a <span id="test"> tag an id and trying to update it through the link <a href="home.html" target="frame" test="Title"> but nothing I have tried will work. In short i'm trying to change text on my website when someone clicks a link. Anyone know how I would go about this? Many thanks in advance. and tell me why my three buttons turn to black rectangles when mouse over only in explorer, but work fine in firefox and safari? i really appreciate any time you spend helping me out. you dudes all rock!!! thanks, harpster i am pasting the entire page and will note the uncooperative buttons start under the red text. Code: <head>
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../menustyle.css" media="screen, print" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<title>Planetarium Services-AstroFXCommander for PC</title>
<meta name="resource-type" content="document">
<meta name="description" content="Design, show production, and soundtrack recording for planetariums. From panoramic video to surround sound to laser shows, we offer turnkey or ala-carte solutions for space theatres.">
<meta name="keywords" content="surround sound, panoramic, planetarium, planetaria, digital, audio, video, laser, star, projector, graphics, animation, multimedia, studio">
<meta name="distibution" content="global">
<SCRIPT language="JavaScript">
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=720,height=480,left = 10,top = 10,right = 10,bottom = 10');");
}
// End -->
</SCRIPT>
<SCRIPT language="JavaScript">
<!-- Begin
function popUp2(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=1024,height=768,left = 0,top = 0,right = 0,bottom = 0');");
}
// End -->
</SCRIPT>
<style type="text/css">
<!--
body {
background-image: url(../images/wallpaperblue.jpg);
border-left: 2;
border-right: 1;
}
.style9 {font-size: x-large}
.style10 {font-size: medium}
-->
</style>
</head>
<body onLoad="switchImage('slideImg')">
<table width="939" border="1" align="center" bordercolor="#000000">
<tr>
<td width="929" height="103" bgcolor="#7BCEEF"><div align="center">
<p><img src="../images/BTlinearlogo.gif" width="642" height="123"><br>
<a href="../index.html" onMouseOver="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onMouseOut="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" target=""><img src="../buttons/button1up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button1"></a> <a href="people.htm" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target=""><img src="../buttons/button3up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button3"></a> <a href="../exhibit/index.htm" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target=""><img src="../buttons/button4up.png" width="152" height="21" hspace="1" vspace="1" border="0" id="button4"></a> <a href="index.htm" onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu5','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu5\')',delay);" target=""><img src="../buttons/button5up.png" width="200" height="21" hspace="1" vspace="1" border="0" id="button5"></a> <br>
<a href="../studiodesign/index.htm" onMouseOver="setOverImg('6','');overSub=true;showSubMenu('submenu6','button6');" onMouseOut="setOutImg('6','');overSub=false;setTimeout('hideSubMenu(\'submenu6\')',delay);" target=""><img src="../buttons/button6up.png" width="256" height="21" hspace="1" vspace="1" border="0" id="button6"></a><a href="planetariumspecials.htm" onmouseover="setOverImg('8','');overSub=true;showSubMenu('submenu8','button8');" onmouseout="setOutImg('8','');overSub=false;setTimeout('hideSubMenu(\'submenu8\')',delay);" target=""><img src="../buttons/button8up.png" width="175" height="21" hspace="1" vspace="1" border="0" id="button8"></a> <a href="../employment.html" onmouseover="setOverImg('9','');overSub=true;showSubMenu('submenu9','button9');" onmouseout="setOutImg('9','');overSub=false;setTimeout('hideSubMenu(\'submenu9\')',delay);" target=""><img src="../buttons/button9up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button9"><br>
</a> <a href="contact.htm" onmouseover="setOverImg('10','');overSub=true;showSubMenu('submenu10','button10');" onmouseout="setOutImg('10','');overSub=false;setTimeout('hideSubMenu(\'submenu10\')',delay);" target=""><img src="../buttons/button10up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button10"></a><a href="planetariumlinecard.htm" onmouseover="setOverImg('7','');overSub=true;showSubMenu('submenu7','button7');" onmouseout="setOutImg('7','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target=""><img src="../buttons/button7up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button7"></a> <a href="planetariumsitemap.htm" onMouseOver="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onMouseOut="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target=""><img src="../buttons/button2up.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button2"><br>
</a></p>
<p> </p>
</div></td>
</tr>
</table>
<table width="939" border="1" align="center" bordercolor="000000">
<tr>
<td width="929" height="2477"><p align="center"><br>
<img height="50" width="442" src="../images/AFXCommander.jpg"></p>
<p align="center"> </p>
<p align="center"><span class="style9">New Version of FXCommander!
</span></p>
<p align=center><a href="astro.htm" onMouseOver="setOverImg('11','');overSub=true;showSubMenu('submenu11','button11');" onMouseOut="setOutImg('11','');overSub=false;setTimeout('hideSubMenu(\'submenu11\')',delay);" target=""><img src="commanderbuttons/serverup.png" width="200" height="21" hspace="1" vspace="1" border="0" id="button11"></a><a href="astrofxremote.htm" onMouseOver="setOverImg('12','');overSub=true;showSubMenu('submenu12','button12');" onMouseOut="setOutImg('12','');overSub=false;setTimeout('hideSubMenu(\'submenu12\')',delay);" target=""><img src="commanderbuttons/remoteup.png" width="155" height="21" hspace="1" vspace="1" border="0" id="button12"></a><a href="starboard.html" onMouseOver="setOverImg('13','');overSub=true;showSubMenu('submenu13','button13');" onMouseOut="setOutImg('13','');overSub=false;setTimeout('hideSubMenu(\'submenu13\')',delay);" target=""><img src="commanderbuttons/starboardup.png" width="135" height="21" hspace="1" vspace="1" border="0" id="button13"></a></p>
<table width="894" border="0">
<tr>
<td width="888"><p class="style10">Bowen Technovation is pleased to announce <strong>AstroFXCommander Version 4</strong>. </p>
<p class="style10"> </p>
<p class="style10">Building from the existing features of previous versions of FXCommander, Version 4 features: </p>
<ul>
<li class="style10">A more streamlined and easy to navigate programming interface. <br>
</li>
<li class="style10">All of your programming tools available on the same screen <br>
</li>
<li class="style10">Still has the same customizable GUI interface <br>
</li>
<li class="style10">Still the same “drag and drop” programming technique <br>
</li>
<li class="style10">Support for many more Communication Protocols <br>
</li>
<li class="style10">A 16-bit DMX driver specifically designed to control our AstroFXAurora LED Strips. <br>
</li>
<li class="style10">Creates smooth 16-bit fades, but with all of the flexibility you used to only be able to get from an 8-bit controller. <br>
</li>
<li class="style10">Real-time control of your LEDs <br>
</li>
<li class="style10">Completely random access fades from your timeline <br>
</li>
<li class="style10">A cost effective way to automate all of the equipment in your theater. </li>
</ul></td>
</tr>
</table>
</body>
i found this link: www.geocities.com/teenagerforum to a site and i dont know what it says (it's greek) but i wanna know how the heck they did that "re-typing?" on the address bar thing. im new to html, and i couldnt find it in the page source. could someone please find it for me and show me exactly how to do it? THANKS So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. hello, i need a website for german customers, somethign like www.podmod.de because i would like to offer the same. So if anyone has an idea where to start, or even can offer me something i can buy, please do so. my email: verenamueller999@web.de thanks verena. Hi How to add a website counter to my website. So that when ever a visitor visits the website I want the counter to increase say from 101 to 102 and then for a new visitor it should be 103 and then again for the next visitor 104 and so on..... I want to know the code. There are number of websites that are offering this but they put their advertisement which I don't want Hi, I am trying to find a way in which a website that is linked on my homepage can be opened while keeping at least one form of my homepage open as well. e.g.: Google images :http://images.google.com/imgres?imgu...en-us%26sa%3DG sorry for the massive link. Hope you get the idea. So what i want is to have a bar on top that is my homepage (like the google bar in the link), but the rest is the actual website that has been linked. I don't really care much about the url. It doesn't have to be my homepage url, it can be the actual website url. Google has been able to do that somehow, so it is possible. I would just like to know how and if it is hard to do. If someone knows how to do it, it would be great if you could give me a link to a tutorial, or explain it. thanks I have some links (in the header, the SUPPORTERS) to different websites, but when I click on them the address in the address bar does not change to the address of the website that I clicked. How do I make it show the address that I clicked on? Thanks. http://www.ac.wwu.edu/~fencing/ I am a total noob but volunteered to administrate the website, because there was no one else to do it. Hi guys, my first post so hi to you all i need some help with a website i made(i know it isn't the best website in the world lol),but its my 2nd one ever so i am proud of it lol, i made the template in photoshop,sliced it in Imageready and i want to make it so i can put my text on to the main grey bit but can't figure out how for the life of me lol,can anyone tell me how to make it so i can write over the main section? is it even possible? Cheers, me Hi everyone. I'm new here but I'm having some problems with my website. It's not up on the web yet, but if you think that you can help me with one or more of the problems, then I can send you the HTML that I already have. There are four things that are giving me problems: My cursor - I would like it crosshair all of the time (even when you click a link) but right now, all it's doing is going crosshair when I click the link. Here is an example of how I would like it to look: http://stonewall.ifastnet.com/ On some of my pages there are excess lines that go across the page and I don't know how to get rid of them. I have made a form, but it won't let me click 'Submit' or 'Refresh' and I would like it to go to my e-mail. I would the Nav bar to look something like this: http://felinefancies.ifastnet.com/ but I'm not sure how to get the HTML like that...because I am still new to HTML. (currently there is no Nav Bar) I had a someone make me the HTML, but they haven't responded to my e-mails. If you could help, it would be greatly appreciated - even just one thing. im not all that great at html and i am making a website for my guild on WoW. i was trying to create a basic layout, but it kept getting screwed up. heres the homepage: http://www.freewebs.com/animefreak98/home.htm. i made the whole page a table because i wanted it to have a back behind the tables, so i made the whole thing a table and seperated everything with colums. the colums are all screwed up. im trying to get them to line up, top to bottom and centered. here is the html: HTML Code: <title> Rise of the Horde (Alexstraza) </title> <table border="15" width="800" height="100%" align="center" valign="top" bordercolor="brown" background="http://www.freewebs.com/animefreak98/riseofthehord%2Dlarge.jpg" bgalign="center" cellpadding="0"> <th> <tr> <td align="center" valign="top"><a href="http://www.freewebs.com/animefreak98/home.htm"><img src="http://www.freewebs.com/animefreak98/banner.bmp"> </td></tr> <br> <tr> <td bgcolor="tan" border="2"><a href="http://www.freewebs.com/animefreak98/index.htm">-Home-</a></td> <td bgcolor="tan" border="2"><a href="http://www.freewebs.com/animefreak98/members%20page.html">-Member's Page-</a></td></tr> <br><br><br> <tr> <th align="center" valign="center"> Rise of the Horde </th> </tr> </table> </tr> </td> basically i want the banner to be at the top center of the table. i also want the two links to appear like buttons under the banner. then i want the header and wutever else i put under the links. please help me Hi, I am currently working on designing a website that provides tools for students to manage their school work and would like someone to help me write the HTML code. I can provide you with the layout design and we can work out a price. Please email me at riddler2037@yahoo.com if you're interested. Thanks How can I achieve this exact basic website layout? http://www.cloutonline.com/ Of course I will use my own logo, links, etc. But that is the same exact design I was going for. That same layout. Tables etc. I can't seem to get it right. So i am making a site in dreamweaver but i am having a little trouble. My website looks different in dreamweaver, than it does outside of it. Here's how i want it to look But outside of dreamweaver it looks like this Any ideas why it is doing this? So i want my items in rows on my product page but with the shopping cart layout the way it is i can figure it out.I'm actually looking for someone to help me build it.I would especially like to be able to ask you to do something and then see it done and put on the website.I would be willing to pay for everything done.If anyone can help please let me know. I finally have built my website. I used wordpress. How do I implement ads onto my website? Do I need a certain amount of users viewing it or what? It is... www.thesoulofashark.com Hi I am new to these forums, I am currently building a website from a template I purchased. It is coming along well but I am now stuck when trying to use the first page of my website as an ebay listing page. Of course when I upload my new ebay page there is nothing but text and broken links. How do I connect this html in my ebay listing page with my source code on my website?. Or do I have to upload all image files for borders and headers to a server separately and link straight to them one by one?. Is it to do with the very top html on the page where it says similar to href source etc etc?. My website is fine since I have uploaded all the necessary files to the directory so linking all the images etc. Really appreciate some help I have been stuck for weeks trying to get the graphics to work on my ebay page. OK hi there. I'm sorry if there is another topic with this but there are so many pages around here and i dont have so much free time to read everything and if there is another topic pls if you can pm with that topic and delete this topic. So my problem is this how can i make one html page or php or i dont know what i need to do this to contain two or more pages that can be accesed only when i click on some link. So more pages on a single document. That is what i need. Or i need also to know how to make different documents and they appear on a single page. Sorry again if that topics exist but how i sad earlier i dont have much free time but i really want to learn this things beacause i know some basics about html and i want to make a good website soon. Thanks in advance. So, I've designed my site to cater best to FF, but now I'm noticing that it looks like it should in IE, and it seems like FF blows up my text and images an extra size! Why is this? Check out my site http://www.justingillphoto.com and switch rendering between FF and IE. See how the sizing is all out of whack in FF? What's causing this? Is there some recent FF update that makes my CSS obsolete or something? It happens on every page, even my blog! This has only happened recently. It used to be fine... EDIT:: Now that I investigate it, the format is fine when I open html files on my hardrive, but they get screwy once they're uploaded on my server! What could be causing this?! |
|||||||