|
HTML - Awesome Address Bar Title... How Is This Done??? Help Plz
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 Similar Tutorialsand 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 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 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 am pretty new at this, so any help would be appriciated. I want to put a custom text in an address bar of user's browser, so that any page on my site shows www.mydomain.com instead of www.mydomain.com/mypage.html or www.mydomain.com/asubpage.php. I don't want users to see the titles of subpages of my site. My server supports PHP, so I could write this in either HTML or PHP, but don't know how. Is this possible to achieve and if so, how? is there a way to put a href into a title of an image? Need some info on <title>. Sorry that my first post on this forum is a question, but I've spent way too much time trying to figure this out on my own. What's the HTML or code to place images in the title of a webpage? As in this image... Any help you can give would be greatly appreciated!! -Matt Hello, Im tyring to create a group by box with a title identical to the attached, I cant figure out how to make this happen Can someone show me a mock up of this? i've noticed that when i use the <alt> tag and rollover an image the alternative text doesn't show up, it only show's up when i use the <title> tage... do i need to be using both? which file do i edit to change the title tag? lol i know i suck. My title disappears in Ie, but is visible in FF. Site validates. Any ideas? http://www.apnaonline.ca Thanks, Geoserv. Hello, I am new to the forum, my question is, how do you get the little image that shows in the title of the web page and on the browser tab? Thanks Chunk How do i change the circled text in a browser? EDIT: Its a Pop-up.. Can you change the color of the 'Title' of a page? For instance, I would like to update the title of my webpage to warn when the site is going down for maintenance, so during these times, I would like the message to be red. Thanks. Hey guys! I'm trying build a website by editing a wordpress template. At the minute, though, the title of each post, and 'related posts' which should be at the bottom of the page are dab in the middle of the post, and I can't figure out why. Take a look he http://www.thepixelnation.net/2009/11/15/3/ Thanks. Hi, I've got this issue. I've got a thumbnail of a post of wordpress on top of the title of the post. I want to so the thumbnail is to the left of the title. so its like this: ----------- | Image | Title ----------- Here is the link to the website: I tried putting in the tag align="left" to the image but that didn't make a difference at all. I would appreciate the help. I heard that the <title> tag is the most important meta tag you use on your page, so I want to use it more fully than I currently am. At the present, I have a single title tag that I use in my header file that every page on my web site (link in my signature) uses. My question is, would it be better to put a <title> tag on each page individually and get rid of the title tag in my header file? My site is new, and I'm pretty new to the specifics of web hosting (I'm a hobbyist webmaster) so any help would be appreciated . Hello, For some reason my title tag is still showing up as "Untitled Document" below is a snippet of the code that I currently have for my site. It reads correctly after I upload it to my FTP but it doesnt display correctly in the preview mode in dreamweaver cs5. I have never seen this happen and I'm not sure why it is doing this. I have some php on my site and have a testing server set up. Maybe this is why?Please help... <!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>Eau Claire Coupon Advertising::Local Ad Saver</title> <style type="text/css"> hi, how can i add an image in title of the page (in title tag)? and in the adress bar? please help how do i put a picture on the title bar? well, some sort like the bulb on this website. |
|||||||