HTML - Swapping Pics
Ok, I have a button, which i will call button.jpg
I have a picture, which I will call picture.jpg I can make the image of the button change when I hover over it, but I ALSO want picture.jpg to change. The other pics are button2.jpg and picture2.jpg So when I hover over button.jpg it will change to button2.jpg and picture.jpg will change to picture2.jpg Any help? Similar TutorialsGo to: http://jmillerteam.com/complete2.html So my client says that sometimes when he loads this page the pics on it aren't loading. He even sent me a screenshot. I have no clue why most of the time they load and sometimes they don't. I can't reproduce the problem. If anyone goes to the page do the pics not load (the first time) for you? Hi: My simple website has 4 .jpg pics on it (one in each corner of the page) and text all thru the middle. These pics (and test) show perfectly when my form is first loaded. However, when the user 'clicks' on the submit button, and I re-send the same page, those four pictures disappear and the 'alt=xxx' statement appears in place of the pics. THe text still shows perfectly. Question: Why don't the pics appear on the second and subsequent times ?? I'm puzzled, because the page I'm sending is identical in all cases. Thanks for any insights on this. -Mel Smith Mesa, Arizona Hey, i got a little problem with the pictures on my html site (http://www.cnc2.de.vu). Many pictures don't work and i don't know why PLS HELP!!! My pics are not showing up on one of my pages? Can anyone help me out? Thanks! Here is the link: http://www.adiktedapparel.com/LINESHEET.html Bill www.adiktedapparel.com Hey there! Is it possible to have a random GIF file loaded each time you open the site? For example if you open the page now, an animated GIF will load to advertise x and when you go to the same page later, an ad will load to advertise y. Thanks in advance! I Hi guys I have a pic in my templates folder with the html document in the the same folder. So what i want to do is add the picture to the HTML document so that it appears on the browser. surely this code should work but at the moment it is not? <img src=/"templates"/"dog.jpg"> HELP Hi there, I'm trying to get the pictures he http://profiles.no-nick.com/example/ To look more like this: http://profiles.no-nick.com/pictures/female/ How can I get the gap out from between them? Hi everyone, The pics on this page are being pushed down, no matter what I do, the pics don't want to go up and align with the word "Categories". Does anyone know what I did wrong and what I cab do to fix it? Here's the link to the page: http://PracticeWriter.com/vu/?605B8 Thanks in advance Ning Hey guys, I am brand new to HTML. I managed to make it so that when I hover a mouse over an image it will change, like for a menu link button. Its a great effect. I got to thinking about it, and heres something I would LOVE to do: Have a menu link button, at the top of the page, when the mouse scrolls over it another picture changes below it as well as the button changing. So, I would have 4 pics all together. Menu1.jpg (default) Menu2.jpg (when the mouse is over it) Picture1.jpg (default, is a seperate picture below menu1.jpg) and Picture2.jpg (changes from picture1.jpg when the mouse is over menu1.jpg!) I can't seem to pull that off tho... Heres what I kinda attempted to do... <img src="forum2.jpg" style="border: none" name="forum2" <a href="URL"> <img src="forum1.jpg" style= "border: none" name="forum" onmouseover="forum.src='forum2.jpg'" onmouseover="forum2.src='forum1.jpg'" onmouseout="forum.src='forum1.jpg'"/> </a> Hi. I need to do a roll over image swap. When the user rolls over a button I want an image elsewhere on the page to change to a relevant image. i.e. When the user rolls over the Commercial Button, an image int he center of the screen changes to show an image of a commerial bill board. I'm using Dreamweaver mx 2004. I'm sure I had seen the tutorial in the Dreamweaver help files, but now I cannot find it. Can anybody direct me to where I need to look to get this sorted. Cheers. Leroy Hello all, I have this site: http://www.votingforrewards.com/nba-champions/main/nba-champions/{keyword}/ As you can see I have two pics here and the name of each player below each pic. How would I be able to have 4 pics accross with each (4) names below each pic. The way I am doing it now is that I use Photshop to place two pics on 1 canvas (don't know if I am doing this correct). The players links use to be a yes and no. So I guess I am cheating. I don't know. Would I use a table? I have been trying to play with the code but can't figure it out. Please help and if you can be as newbie friendly as possible, I would appreciate it immensely. I am using dreamweaver for editing the code, the file has php in it, and it also has a css file to let you know. Thanks, Geo Internet Explorer - Firefox - Why does my site look so bad in Internet Explorer? Internet Explorer says there are errors on the page... Line: 61 Char: 1 Error: Expected identifier, string or number Code: 0 URL: http://www.lucaschu.com Internet Explorer doesn't feature the animated sidebar (About, Contact) and the videos are arranged wrong with some weird gray block next to them. Firefox and Chrome make it look nice. How to make IE version better? Hi, I am trying to set up a pictures page on a web site. My first idea was to set up two iframes so that the user could scroll sideways on the top through the pictures and each picture would link to itself in a bigger size targeted to another iframe... like this. I put a few of the pictures in here just to show you what I was thinking... the page really isn't working well, I just threw it together to show you the structure I'm talking about. This would work, but I'd also like the description to change, so I was thinking of using Javascript (I don't actually know javascript yet, so I'm guessing at this) so each picture would change TWO iframes, one as the picture and the other would be the description. The problem with that would be that I would have to make a new html page for each description... I guess I could do that, but would there be anything easier? All the solutions I have thought of like using a getElementByID javascript to change the picture and text wouldn't work because of the iframe. If there is another solution, I don't even need an iframe. I was just checking to see if anyone had any suggestions on this, either a simpler solution to the iframe idea or a completely different idea. It really doesn't matter, I just want a good looking, easy to use pictures page. I have this script: HTML Code: <script> function upload() { document.getElementById("filebox").style.visibility='visible'; document.getElementById("namebox").style.visibility='hidden'; document.getElementById("newfile").value='1'; } </script> <form method="post" enctype="multipart/form-data"> <table> <tr><td>Bestand:</td><td colspan="2"> <input type="hidden" id="newfile" name="newfile" value="0" /> <span id="filebox" style="visibility:hidden;"> <input type="file" name="uploadedfile" style="width:300px;" /> </span> <span id="namebox"> <input name="filename" type="input" style="width:300px;" value="<?php echo $row['bestand'] ?>" DISABLED="DISABLED" /> <a href="javascript:upload()">New File</a> </span> </td></tr> ...more form... </table> </form> My problem is now that the ''filebox" and "namebox" are not at the same place. I want that if a use presses 'New File' the "namebox" is hidde and ''filebox" appears at exact the same place as "namebox" was. how to do this? Hi there, I'm currently working on http://www.darkboutique.co.uk/DEMO/index.html (WARNING: It is very pink) and I cannot get the text on the right, Recent posts, categories etc. to go to the left. I think this is a HTML problem. Can anyone offer advice please? Thanks Ok, newbie here... I have two questions about background pics... I downloaded an image which I want to use as a background pic. The pic is located in the same folder as the my html script (Wordpad). I can get it to display but the pic is "broken up"; the image basically cuts off on the right, and then starts over. How can I fix it? This is a page for my sister-in-law; I wanted to email her a sample page but when I test-emailed it to myself, the background pic didn't display. I am pretty sure it has to do with the path; any recommendations? Thanks so much for your help! S. Hi guys I have a pic in my templates folder with the html document in the the same folder. So what i want to do is add the picture to the HTML document so that it appears on the browser. surely this code should work but at the moment it is not? <img src=/"templates"/"dog.jpg"> HELP THIS PROBLEM IS WITH --IE-- ONLY I have this piece of code that I simplified as much as I could to show a simple example: PHP Code: <table width="50%"> <tr><td colspan="2">short</td></tr> <tr> <td width="128"><img src="" width="110"></td> <td>a<br>a<br>a</td> </tr> </table> <table width="50%"> <tr><td colspan="2">long long long long long long long</td></tr> <tr> <td width="128"><img src="" width="110"></td> <td>a<br>a<br>a</td> </tr> </table> For some reason when long-long-long text is long enough, it pushes a-a-a-a to the right even through one of the cells is limited to 128 pixels.. If I color the backgrounds of the cells in different colors, it is evident that it is the cell pushing, not text-alignment problem Question, why the cell is affected but the upper cell text length even through it is properly col-spanned..? I basically have some free code I found online for creating an overlay that reacts to javascript. It contains a quick time plugin and streams video when the user clicks a link. This is the code exactly as I received it and functions great. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #displaybox { z-index: 10000; filter: alpha(opacity=50); /*older IE*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */ -moz-opacity: .50; /*older Mozilla*/ -khtml-opacity: 0.5; /*older Safari*/ opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/ background-color:#000000; position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle; } </style> <script> function clicker(){ var thediv=document.getElementById('displaybox'); if(thediv.style.display == "none"){ thediv.style.display = ""; thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='640' height='500'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>"; }else{ thediv.style.display = "none"; thediv.innerHTML = ''; } return false; } </script> </head> <body> <div id="displaybox" style="display: none;"></div> <a href='#' onclick='return clicker();'>Open Window</a> </body> But bugging/stuttering and browser incompatibility has made me want it to be a .swf file instead. So now I have a very basic flash object that plays my movie, splash.swf. Here is the code and it too functions perfectly: Code: <object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object> So now I have two independently working bits of code - one which opens the transparent overlay and plays a video using a quicktime object, and another that is simply a flash object to replace that quicktime object. So what I've done is replaced everything in between the [object]..[/object] in the first code with everything in between the [object]..[/object] in the second code, producing the following new code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <style> #displaybox { z-index: 10000; filter: alpha(opacity=50); /*older IE*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */ -moz-opacity: .50; /*older Mozilla*/ -khtml-opacity: 0.5; /*older Safari*/ opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/ background-color:#000000; position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle; } </style> <script> function clicker(){ var thediv=document.getElementById('displaybox'); if(thediv.style.display == "none"){ thediv.style.display = ""; thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='center' valign='middle' width='100%' height='100%'><object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/ pub/shockwave/cabs/flash/swflash.cab"> <param name="SRC" value="splash.swf"> <embed src="splash.swf" width="640" height="480"></embed> </object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>"; }else{ thediv.style.display = "none"; thediv.innerHTML = ''; } return false; } </script> </head> <body> <div id="displaybox" style="display: none;"></div> <a href='#' onclick='return clicker();'>Open Window</a> </body> But what is this? By replacing the working quicktime object with the working flash object, Dreamweaver produces a syntax error that wasn't there before, and breaks the entire script. Clearly the script is referencing something within the tags that I am replacing, although it's not clear to me what. http://goldenworldgoods.awardspace.com/ Hello again, I did this site in Dreamweaver, looked fine in my dreamweaver editor, uploaded it and voila everything goes nuts. List of Problems: The Links are not positioned properly, not big enough plus the drop downs to the bottom and not to the right. That was properly my fault since I just copied a suckerfish method... But can someone help with this. If you study the News Header in the CSS, it says it has a background image, how ever it doesn't show when I uploaded it. I know the url and the pic is correct cause it worked in Dreamweaver... The background for "welcome" is all the way up there which isn't supposed to happen, it supposed to be right on top of the Hello text but that isn't happening either. The hello and welcome are supposed to be aligned to the left of the right header. Thats about it, please can someone help me. I've changed the format of this like 3 times just to get it correctly done, but nothings working. Thank you And don't worry I got it all validated and what not |