|
HTML - Hover Images That Fade... (debunking Code)
ok so I found this code online:
HTML Code: <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span
onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }"
onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})"
></span></a></div>
</div>
can someone help me understand it and potentially get it to work? Similar TutorialsSo the plan is to play this sound MP3 as soon as the site gets entered. I also need it to loop untill the person clicks on either Dutch or English.. and gets directed towards the destined homepage where the MP3 file fades out within about 10 seconds. My question.. can I do all the above with HTML? I thought about editing the last part of the mp3 file manually so ill make it fade and then just play that faded mp3 as soon as the destined homepage gets entered.. but that wont be possible, since i dont know at which point the user clicks on Enter site... I have a table with 5 images in one row. In 4 of them the four images are of words for a navigation bar. Each word is black and right below it is the same word in color. When the mouse hovers over the four words I would like the image to raise up so that the colored words are shown. Here is what I have so far: Code: <table>
<tr>
<td><a href="" target="_new"><img src="menu/Logo.png" width="139" height="155" alt="Back to home page" border="0"></a></td>
<td><a href="" target="_new"><img src="menu/Drafting.png" width="98" height="65" alt="Drafting" border="0"></a></td>
<td><a href="" target="_new"><img src="menu/Programming.png" width="157" height="65" alt="Programming" border="0"></a></td>
<td><a href="" target="_new"><img src="menu/Resume.png" width="93" height="65" alt="Resume" border="0"></a></td>
<td><a href="" target="_new"><img src="menu/Contact.png" width="96" height="65" alt="Contact" border="0"></a></td>
</tr>
</table>
Is it possible to move the images like this or do I need to use a background image instead? I'm about to try and code this page. Basically, it is a group of of linked images. I want to have the images open in lightbox 2.0 but I also want them to have a roll over element. I know both features require javascript, so can they both work together? (stupid question?) I know the scripts have to go in the head of the page. Lets say the images are as follows work1_off.jpg work1_on.jpg work2_off.jpg work2_on.jpg work3_off.jpg work3_on.jpg work4_off.jpg work4_on.jpg work5_off.jpg work5_on.jpg work6_off.jpg work6_on.jpg work7_off.jpg work7_on.jpg work8_off.jpg work8_on.jpg work9_off.jpg work9_on.jpg what might the tags look like? I don't know alot about HTML. I just need a simple HTML Rollover/Hover code I can pop my image URLs into and it will work. Help? I'm using Freewebs, btw. Hello, I'm a bit of an amateur at HTML, I'm still using notepad to make my site ;-) Anyway for the most part I've had good success when updating my website, however now I'm encountring a real head scratcher and I'm hoping some of you kind and wiser gentlemen (and ladies?) can help. After inputting my code and building locally I see the image below to the left, however upon uploading all my goods (using Ipswitch WS_FTP Pro 30 day trial) it appears that my code has updated correctly, however none of my images show up, as seen on the below image to the right. I've attempted to troubleshoot this one a bit but I think I've hit a wall, I don't know if it's the FTP program I'm using (hasn't given me issues in the past) or if I'm running out of space on my site? but even some images that I merely swapped for newer images aren't updating (same file name, etc) It's as if it wont accept any new jpegs! I can change the code and the simple text that I have and it'll update fine and dandy but needless to say on a site that's supposed to feature art pieces, I'd like to get my artwork updated :-( My site is www.alexanderalza.com Any help would be GREATLY appreciated, thank you very much! hello i can't get my web page to display a picture from picture folder i have to use notepad its for my college assignments. anyone have any ideas what i'm doing wrong? Hi, I am not too sure if this is doable, but I have several buttons that let you put in an image location. Then at the bottom you click another button. I want this button to upload those images to my server. I know this sounds confusing, sorry. Does anyone know how to help me with this? thanks, David I have created an image in Photoshop and sliced it to create different links as a banner. When I opened the html file on my computer it works and the links all work. The part that doesn't work is when I changed the file locations to the location on photobucket. Somewhere I have something wrong. If anyone can direct me on what I need to correct I would greatly appreciate it. I feel like I am close but something is off. This is the image itself http://www.shopmemento.com/images/me...gemap4copy.jpg This is where I got the directions of how to do a multiple link image with image slicing: http://www.createblog.com/tutorials/...l.php?id=13888 HTML Code: <HTML> <HEAD> <TITLE>memento image slice</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> </HEAD> <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> <!-- ImageReady Slices (memento image slice.psd) --> <TABLE WIDTH=338 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=8> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_01.gif" border="0" alt="Photobucket"></a> <WIDTH=338 HEIGHT=131 ALT=""></TD> </TR> <TR> <TD> <A HREF="http://www.shopmemento.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Website'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=[IMG]http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg[/IMG] target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_02.jpg" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=46 BORDER=0 ALT="Memento's Website"></A></TD> <TD ROWSPAN=2> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_03.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_03.gif" border="0" alt="Photobucket"></a> <WIDTH=15 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.blogspot.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Blog'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_04.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_04.gif" border="0" alt="Photobucket"></a> ><WIDTH=69 HEIGHT=46 BORDER=0 ALT="Memento's Blog"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_05.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_05.gif" border="0" alt="Photobucket"></a> <WIDTH=18 HEIGHT=56 ALT=""></TD> <TD> <A HREF="http://shopmemento.etsy.com" TARGET="_blank" ONMOUSEOVER="window.status='Memento\'s Etsy Shop'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC="<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_06.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_06.gif" border="0" alt="Photobucket"></a> <WIDTH=68 HEIGHT=46 BORDER=0 ALT="Memento's Etsy Shop"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_07.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_07.gif" border="0" alt="Photobucket"></a> <WIDTH=13 HEIGHT=56 ALT=""></TD> <TD> <A HREF="mailto:terri@shopmemento.com " ONMOUSEOVER="window.status='Email Memento'; return true;" ONMOUSEOUT="window.status=''; return true;"> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_08.jpg" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_08.jpg" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=46 BORDER=0 ALT="Email Memento"></A></TD> <TD ROWSPAN=2> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_09.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_09.gif" border="0" alt="Photobucket"></a> <WIDTH=8 HEIGHT=56 ALT=""></TD> </TR> <TR> <TD> <IMG SRC<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_10.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_10.gif" border="0" alt="Photobucket"></a> <WIDTH=77 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_11.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_11.gif" border="0" alt="Photobucket"></a> <WIDTH=69 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a <WIDTH=68 HEIGHT=10 ALT=""></TD> <TD> <IMG SRC=<a href="http://s406.photobucket.com/albums/pp148/shopmemento/?action=view¤t=memento-image-slice_13.gif" target="_blank"><img src="http://i406.photobucket.com/albums/pp148/shopmemento/memento-image-slice_13.gif" border="0" alt="Photobucket"></a> <WIDTH=70 HEIGHT=10 ALT=""></TD> </TR> </TABLE> <!-- End ImageReady Slices --> </BODY> </HTML> Hi everyone, I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click. What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view. Here's an illustration of what it looks like: I got everything working now except for two annoying problems: - The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play) - When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing Here is my code so far: I've simplified it to two content pages so it's easier to read. HTML: Code: <meta charset="utf-8">
<title>The Elements of Go</title>
<!--jQuery library-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<!--CSS for html-->
<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
<!--FADE-->
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() { showWindow("mainpage") }, 2000);
$('.aboutbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("aboutpage"), 2000);
} );
$('.mainbutton').click(function() {
hideAllWindows();
setTimeout(showWindow("mainpage"), 2000);
} );
function hideAllWindows() {
$('#mainpage').fadeOut();
$('#aboutpage').fadeOut();
$('#historypage').fadeOut();
$('#referencespage').fadeOut();
$('#strategiespage').fadeOut();
}
function showWindow(name) {
$('#' + name).fadeIn();
}
});
</script>
</head>
<body>
<div id="backgroundcontainer">
<div id="mainpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head to about page-->
<a class="transition aboutbutton"><img src="some image">
</a>
</div>
<div id="aboutpage">
CONTENT GOES HERE FOR THIS PAGE
<!--image link to head back to main page-->
<a class="transition mainbutton"><img src="some image">
</a>
</div>
</div>
</body>
</html>
CSS: Code: @charset "utf-8";
/* CSS Document */
/*The webpage background image*/
body {
background-image:url(../pictures/menubackgroundbubbles.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
}
#backgroundcontainer {
display:block;
margin-left:auto;
margin-right:auto;
}
/*background image for the content pages*/
#mainpage,#aboutpage {
background-image:url(../pictures/background.png);
background-position:center;
background-attachment:fixed;
background-repeat:no-repeat;
overflow:hidden;
display: none;
margin-left: auto;
margin-right: auto;
position: relative;
width:800px;
height:570px;
}
#mainpage img,#aboutpage img {
position: absolute;
border:none;
width: 119px;
height: 119px;
}
Thanks for any help! Hello, I am trying to achieve something in html that im not sure is possible, but i have been told it is. If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up? for example. if i have this: <p>hello, please click <a href="#">here</a> to change this text</p> when the user clicks the link, the line pops out and the following line pops in in its place: <p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p> Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it? I appreciate any help. thank you. Ben. edit: i no longer need the text to fade, it just has to swap the lines of code on click. At the moment I have a color fade on the left side of our website behind the links. I am using the onmouseover and onmouseout commands to change the color when someone puts their cursor over the link. I have no problem changing the background color when the mouse is over the link, but I can't find a way to return it to the color fade background after someone removes their mouse. Any ideas as to what I should put in the onmouseout spot to get it to return to the original fading background? <tr> <td width="200" valign="top" style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#F5F5F5', startColorstr='#CAF0F7', gradientType='1'" ><table width="87" height="155" border="0"> <tr> <td><table width="200" height="229" border="0" cellpadding="0" cellspacing="0" bordercolor="#F5F5F5" id="navigation"> <tr> <td width="200"><div align="center"><a href="Homepage.html" class="navText style3" onmouseover="style.backgroundColor='#CAF0F7';" onmouseout="????????" ><font color="#5A434A"><span class="style5">Home</a></div></td> </tr> thanks Hi guys, we're using a WordPress theme for a clients site and we'd like to know how to make the hero banner on the home page automatically rotate? http://www.anchorhotelhaydonbridge.com/newsite/ Thanks in advance, Paul So I need to make a background to a <div> with a color fade in it. Here's the catch: The application is a Joomla template, so the <div> height will be very variable, and will always be getting longer as additional content is added, so the standard trick of just making a gradient image and setting repeat x won't work. So what I need is a way to basically have two different colors (the starting and ending colors for the gradient) and have the browser always render that gradient regardless of the element height, 1000 px, or 10000 px. Is this possible? I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect? Hello, I am using some Jquery code + CSS to display fade in and out text above each image. However, i can't figure out what I am doing wrong and the text is not being displayed when the user hovers the mouse over each image.. http://www.greekconcierge.com/group.php Any ideas? best regards, Andy Hi All Below works in Firefox, Safari but not IE6 - Is it possible (We can't upgrade to 7 or above ) Is there any thing I can do ? <head> <style type="text/css"> <!-- .showdata, .showdata ul {padding: 1; margin: 0; list-style:none;} .showdata a {display: inline-table; width: auto px;} .showdata li {float: left; padding: 1px 8px 2px 0px;} .showdata li ul {position: absolute; background: #FFF399; padding: 1px 1px 1px 4px; width: auto px; left: -9999px;} .showdata li:hover ul {left:auto; } .red {color: #ff0000;background-color:#6495ed; align=right} .blue {color: #6495ed;background-color:#c50020; align=right} --> </style> </head> <html> <body> <ul class="showdata"> <li><a href="#">jimmy Smith</a> <ul> <div> <li><a ><table> <tr class="showdata"> <td style="color:red" align=right>country: </td> <td style="color:blue">UK</td> </tr> <tr> <td style="color:red" align=right>Area: </td> <td style="color:blue">England</td> </tr> </table></a></li> </ul> </li> </ul> </td> </tr> </table></div> </body> </html> Hello, I am a pretty good coder, But I'm stuck on something I have never tried before.. When I hover the div the text doesn't display (Using display:none unhovered, display:block onhover) The code is below. HTML Code: div.container > div.text {
padding: 5px;
width: 300px;
height: 100%;
display: none;
}
div.container > div.text:hover {
display: block;
}
<div class="container">
<div class="text">
</div>
</div>
When I don't use "display" the text displays but it goes over the width I want it too here is the code alittle like this ... (my bad ascii art) Code: ---------- | xxxxxxxx|xxxxxxx | | ---------- Does anyone have an idea how I could fix this? If I didn't explain clearly I'm sorry its nearly 3am... -Daniel I've made a small icon that I want to show on the left side of each link in my menu when the arrow is over it. Haha, hard to explain In my menu, I dont want the icon on the left side of the links to be visible until the arrow is over the link. What do I do? Put the image tag in front of every link, and use the a: hover (in the stylesheet) to decide when I can see the icon? Is this even possible? It is the same icon that should be shown next to every link. Alright, I've been attempting to redesign my website without any templates, just from my own personal design. And I've got to say, I'm impressed with myself on just how great it's coming together. But of course, it was too perfect for far too long, so the problem gods had to give me a giant hard problem to deal with. Anywho, my text is not aligning correctly inside of it's navigation container <LI>, Rather hard to explain, but it's easier to show you. In the left column, you'll see a thing that says "latest tutorials", and of course, the text is aligned toward the bottm, despite the fact I put a vertical-align: middle in the CSS. You can view the markup + the CSS in the source. All of the CSS is in the source, I haven't moved it to a new file yet. My problem isn't as bad in IE, but it's still there, in firefox it's just flat out terrible. I added a border around the <LI> so you can see where everythings positioned. Thanks for any help in advanced. First off, I have designed one site ever and it's still in progress. I also have no basis in computer training other than graphic design. I am a total beginner, but the site I'm designing is for my personal business, so I'm continually updating it with new features I like. I was hoping to use hover menus (I have no idea if that is the technically correct term, but when you put your mouse over a link, it gives you a drop down menu) on my site, but really have no clue how to do that. Is it possible in HTML or would I have to use javascript or flash? If so how would I incorporate the code into a generally HTML based site? Thanks! :-) |
|||||||