HTML - Picture Selection Favorites

For the site that I am currently in charge of I removed a slideshow because it took too long to load. In it's place i tried to add just a picture, but it will not work. I uploaded the picture to the site, have the correct html, and placed the html where the code for the slideshow used to be but it doesn't appear on the page. It doesn't even give one of those X's to show you the picture isn't loading. Here is some of the code surrounding where I'd like the picture to be.

<div id="text6" style="position:absolute; overflow:hidden; left:22px; top:628px; width:929px; height:205px; z-index:5">
<div class="wpmd">
<div><font face="Times New Roman" class="ws16">Mission Statement</font></div>
<div><font face="Times New Roman" class="ws16"><BR></font></div>
<div><font face="Times New Roman" class="ws16">A collaborative team including individuals impacted by neurological conditions, providers who serve them, members of communities in which they live, advocates, and researchers who investigate these impairments will identify, develop and disseminate information and strategies, and maximize resources to improve outcomes and quality of life. <a href="http://www.karrn.org/SCIRehabProgram.pdf">2010 SCI Rehab Conference Program</a></font></div>
<div><font face="Times New Roman" class="ws16"><BR></font></div>
</div></div>




<div id="shape1" style="position:absolute; overflow:hidden; left:698px; top:248px; width:310px; height:320px; z-index:7"><img border=0 width="100%" height="100%" alt="" src="images/shape3078289.gif"></div>

<div id="text5" style="position:absolute; overflow:hidden; left:19px; top:591px; width:238px; height:25px; z-index:8">
<div class="wpmd">
<div><font color="#000000" face="Times New Roman" class="ws18"><B>Welcome to our site</B></font></div>
</div></div>

The blank area there is where the code for the slideshow was. All I need is a simple picture. Anyone know why it's not working? Thanks ahead of time!

Hi everyone,

I'm new here and new to html stuff. I really need to learn it to make my website.

I've been messing around all day with the codes and so far all I got is this:

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0" bordercolor="#330000" width="100%">
<TR>
<TD WIDTH="950" HEIGHT="17" BGCOLOR="#000000" VALIGN="top" align="left">
<font face="edwardian script itc" style="font-size: 65pt" color="#FFFFFF">George Gabrielle Couture
</font></TD>
</TR>
</TABLE>
<table border="0" width="20% align="right" bgcolor="FFFFFF">
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Fall/Winter</font></td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Holiday</td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Resort</td>
</tr>
<tr>
<TD BGCOLOR="#000000">
<font face="pica10 bt" color="FFFFFF" size="3">Baby</td>

Now I need to add some pics to the white part of the page (left-hand side). Forgive me everyone, when you answer this please treat me like I'm a 5 year-old, LOL . I am soooo html challenged. I'm only a seamstress, and sewing clothes is all I know .

I'm trying to make a picture button. I have a little so far can you help with the rest.

<input type="button" onclick="javascript:alert('Noob, u fell for it!!!')" />

Hi! I'm working on adapting a we-based system called OTRS (open ticket request system) for our offices here and I've just finished modifying all the headers and css and stuff for our needs. Now, I did it in Firefox and I'm brand spanking new to this game so when one of the header logos didn't appear in IE7, it took me about an hour to figure out maybe it was IE7 that was the problem, and it turns out it is... so would someone mind having a look at this below?

It's very basic, but what's happening is that the picture 'HeaderCropped' isn't displaying, the border outlines don't even show, only that funny little graphic that appears when a picture is missing ( I don't know what it's called). Obviously I'd like to be able to see the picture in both FF and IE7, but will this take a major overhaul of this code? (It took me quite a while to do this little bit!)

Thanking you in advance!

-Emily
_________________________________________________________

# include Copyright.dtl
$Include{"Copyright"}

# set some html variables
#<dtl set $Env{"Box0"} = "&gt;&gt; ">
#<dtl set $Env{"Box1"} = " &lt;&lt;">

# check refresh
<dtl if ($Data{"Refresh"} ne "") { $Data{"MetaHttpEquiv"} = "<meta http-equiv="refresh" content="$Data{"Refresh"}">"; }>

<html>
<head>
$Data{"MetaHttpEquiv"}
<title>$Config{"ProductName"} $QData{"TitleArea"}</title>
$Include{"customer-css"}
</head>

<a name="top"></a>
<body>
#<!-- start CI layout -->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" class="header"><img style= width: 454px; height: 109px; "src="/otrs-web/images/Standard/HeaderCropped.jpg">
</td>
<td width="100%" class="header" title="www.alliedpensions.com"><a href="http://www.alliedpensions.com"><img border="0" src="/otrs-web/images/Standard/APTLogo.jpg" width="150" height="100"></a></td>
</tr>
<tr>
<td colspan="2"><hr align="left" width="100%" height="2"><!-- end CI layout --><!-- end header --></td></tr></table></body></html>

Hello!
I have a bunch of picture i wish to have on a internal webpage to go around the sides and bottom of the page, positioned around a slideshow in the center. I have managed to get some to go down the left, and i can get them some to go to the bottom but once there they sit on top of each other not side by side? how can i overcome this?? I have tried the 'float' but this was no luck. Also can you tell me how get the images to come down the far right hand side of the page
Thanks
I have inc my code..
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}

.boxed {
position:absolute;
	left:25%;
  border: 2px black;
  border-style: plain;
  width: 700px;
  height: 800px;
}


.boxed1 {
position:absolute;
	left:25%;
  border: 1px blue;
  border-style: dotted;
  width: 700px;
  height: 350px;
  text-align:center;
  float: left; 
  padding:2px;
  background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}
.image1 {
border: 1px blue solid;
width: 200px;
height:100px;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 1px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 400px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>
</a>
<div class="image">
<a class="thumbnail" href="#thumb"><img src="360s.jpg" width="198px" height="98px" border="0" /><span><img src="360s.jpg" /><br />Xbox 360 Slim</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="ps3.jpg" width="198px" height="98px" border="0" /><span><img src="ps3.jpg" /><br />Play station 3.</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="wii.jpg" width="198px" height="98px" border="0" /><span><img src="wii.jpg" /><br />Nintendo Wii</span></a>
</div>
<br>
<br>
</br>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv1.jpg" width="198px" height="98px" border="0" /><span><img src="tv1.jpg" /><br />Sony Bravia KDL-40W2000</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv2.jpg" width="198px" height="98px" border="0" /><span><img src="tv2.jpg" /><br />Toshiba Regza AV61 (32AV615DB)</span></a>
</div>

<div class="image">
<a class="thumbnail" href="#thumb"><img src="tv3.jpg" width="198px" height="98px" border="0" /><span><img src="tv3.jpg" /><br />Samsung B550 (LE40B550)</span></a>
</div>
<br>
<br>
</br>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="ttg.jpg" width="198px" height="98px" border="0" /><span><img src="ttg.jpg" /><br />Tom Tom GO</span></a>
</div>

<div class="image1">
<a class="thumbnail" href="#thumb"><img src="sat2.jpg" width="198px" height="98px" border="0" /><span><img src="sat2.jpg" /><br />Garmin nuvi 3790T</span></a>
</div>


<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"
}
//-->
</script>
</body>
</html>

I was wondering if there was a simple way or script out there that anyone knows that can change a picture at a certian time?

I am doing a website for a diner and they close at 3:00pm and I was thinking about putting a sign on the website that would simply say "Open" when the diner is open and "Closed" when its obviously closed.

Thanks in advanced

how do i put a picture on the title bar? well, some sort like the bulb on this website.

I want to create this type of a navigation utility to scroll through large amounts of pictures 5 at a time. The picture links will be stored in an array. Any suggestions as to how I should code this? I work in asp if that matters.

Code:

<table>
	<tr>
		<td style="background-color:#cccccc;border:medium inset #ececec;padding:0;">	
			<input type="button" name="first" id="first" value="First 5" />
			<input type="button" name="previous" id="previous" value="<<Prev 5<<" />
			<input type="button" name="next" id="next" value=">>Next 5>>" />
			<input type="button" name="last" id="last" value="Last 5" />
		</td>
	</tr>
</table>

Thanks in advance!

After re-structuring the whole website, i got some problems with my pictures. As you see on theese 2 pics i can't get the pictures centered, even with the <center> tag!

(images removed)

before re-structuring i couldn't center the pictures neither, so it isn't because of the new structure. Please take a look on this Code and tell me if you know how to fix this problem.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
	<title>Urne's Website - Community</title>
	<link rel="stylesheet" type="text/css" href="style/style2.css">
</head>

<body>

	<div id="container">
		
		<div id="header"></div>

		<div id="left" style="width:210px;float:left;">
			<a href="index.html"><img  alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a>
			<p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/>
			<p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> 
		</div>

		<div id="main" style="margin-left: 210px;">
			<h1>Urne's Tracks</h1>
			<p>Here i have all the tracks i ever made for Re-Volt. Please check this one weekly/monthly, because the site will be updated at least once/month.<img alt="Smiley" src="img/Smile.gif" border= "0px"/></p>

			<a href="Bone+Island.html"><img alt="Bone Island" src="img/Bone+Island+hot.png" height="200" width="200" border= "0px"/></a>
			<a href="At+The+Farm.html"><img alt="At The Farm" src="img/At+The+Farm.png" height="200" width="200" border= "0px"/></a>
			<a href="Forgotten+City.html"><img alt="Forgotten City" src="img/Forgotten+City.png" height="200" width="200" border= "0px"/></a>
			<br>
			<a href="Cyberspace.html"><img alt="Cyberspace" src="img/Cyberspace.png" height="200" width="200" border= "0px"/></a>
			<a href="Dark+Park.html"><img alt="Dark Park" src="img/Dark+Park.png" height="200" width="200" border= "0px"/></a>
			<a href="Pisa+Grandprix.html"><img alt="Pisa Grandprix" src="img/Pisa+Grandprix+hot.png" height="200" width="200" border= "0px"/></a>
			</br>			
		</div>
	</div>

</body>

</html>

Hope this can help you!

Regards


Urnemanden

Hi

I'm trying to make some text sit under a photo, and it works fine except in IE6, where the first word starts at the side of the photo, then the rest sits underneath.

The page is at www.bigbadroo.com.au/top-stitching/www/ - the photo is of the woman on the left.

Here's my html:

<div id="wilma"> <img src="images/wilma.jpg" alt="Wilma" ><em><strong>Over 40 years industry experience!</strong></em>
</div><!-- end #wilma -->


and the CSS:

#wilma {
float:right;
margin-top:10px;
font-size:7.5pt;
width:213px;

}


Is there anything obvious there?

Thanks for your time and help

Shaun

If you could take a look HERE and tell me how I would do the same sort of picture menu with text to the right and in line with the centre of the pic WITHOUT using a table?

The table is just giving me trouble!!

Sorry to ask so many questions BTW.

Hi all i have a website banner wich i want as my signature so when someone clicks on it they go to my website i just need the html code for it if anyone can help thanx alot.

Cheers
Jacob

Hello..
i am creating a work webpage to display goodies are staff might like to buy for christmas!
Ive got a slide show in the middle and other images around
Ive been able to code the slide show so that when i click the image on the slide it display it in another window
Im having a problem though with being able to code the images around the slide
when i click the individual ones it just brings up the picture in the slide ?
Ive had a little play with it and cant get my brain around it! It may be simple but ive been doing these for days and i am extremly tired from them lol..
can anyone help?

i will display code below
thanks

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="toy2.jpg"
var image3=new Image()
image3.src="toy3.jpg"
var image4=new Image()
image4.src="toy4.jpg"
var image5=new Image()
image5.src="toy5.jpg"
</script>
</head>
<style>
body {
background-image:url('logo2008.jpg');
}

.boxed {
position:absolute;
	left:25%;
  border: 2px black;
  border-style: plain;
  width: 700px;
  height: 800px;
}


.boxed1 {
position:absolute;
	left:25%;
  border: 1px blue;
  border-style: dotted;
  width: 700px;
  height: 350px;
  text-align:center;
  float: left; 
  padding:2px;
  background-color: white;
}
.image {
border: 1px blue solid;
width: 200px;
height:100px;
}


</style>
<body>
<a href="javascript:slidelink()">
<div class="boxed1">
<img src="image1.jpg" name="slide" border="0"width="35%" height="100%" />
</div>

<div class="image">
<img src="360s.jpg" border="0" width="200px" height="100" href="360s.jpg" />
</div>

<div class="image">
<img src="ps3.jpg" border="0" width="200px" height="100" />
</div>

<div class="image">
<img src="DS.jpg" border="0" width="200px" height="100" />
</div>
<script type="text/javascript">
<!--
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<5)
step++
else
step=1
setTimeout("slideit()",4000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="image1.jpg"
else if (whichimage==2)
window.location="toy2.jpg"
else if (whichimage==3)
window.location="toy3.jpg"
else if (whichimage==4)
window.location="toy4.jpg"
else if (whichimage==5)
window.location="toy5.jpg"

}
//-->

</script>
</body>
</html>

Hi,
Maybe this has been asked a thounsand times in this forum, but I haven't been here for a while.
I would like to know how this is done: You have a button with a thumbnail of a picture that you click and this zoom in in the same page, then you click it back to zoom out.

Any help will be appreciated.

Thanks

Hello, it seems every now and then when I create an image from a document/scan or such and I upload it, It displays fine in FireFox, however users in IE are reporting that they're not seeing the image.

Can anyone take look at this image and tell me if you see this displaying in IE?
http://thejf.org/images/JCC124.jpg

Is this an IE bug or something? How come this image appears fine in FireFox but not IE?