HTML - Picture Swap Problem?!

How can I make an image swap when I mouse over another image.

Mouse over image 1, and image 2 turns into image 3. So 2 images visible at once.

Hi Colls,

I have a task such this:
At onmouseover, i need to swap the jpg with marquee text.

I have tried a lot of things but probably i think in wrong direction.

Coudl you help about it?

Thank you in advance.

For some reason my code is not working when I use certain images, any ideas?

HTML Code:

<td><img src="images/product_files/baby shoes &amp; cloathing/clothes/Love'd Baby/320/Gl'oved-Sleeve-Bodysuit-Blue.jpg" name="btn1" width="284" height="320" id="btn1" onmouseover="MM_swapImage('pic1','','images/product_files/baby shoes &amp; cloathing/clothes/Love'd Baby/320/Gl'oved-Sleeve-Bodysuit-Caramel.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>

Does anyone know if there is a way to get an image swap without using Javascript?

In other words, could I set it up so when I hover over a link, an image will change to another one in HTML, CSS, or PHP?


_________________________

Hi,

I have created some swap images in dreamweaver and they were working, but for some reason after doing more work to the site, i now cannot get them to work, i have tried deleting the behaviour and reapplying it but that hasn't worked.

This is the code on one of the buttons. Can anyone point me in the right direction as to why this might be happening?

<img src="images/Contact_On.jpg" alt="" width="107" height="64" id="Image11" onMouseOver="MM_swapImage('Image11','','images/Contact_roll.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>

Thanks a lot your help is appreciated

How do add links to a swap image ?

I have a website and I am using the swap image behavior, now the swap image or the image that is being replaced when you mouse over a hotspot I want to add links to. But I can not see the image or second image to add the links or hot spot areas. How do you add hot spots or links to the swap image?

any help would be appreciated I stumped everyone on this so far.

Hi,

can someone please help me with this?

In preview in dreamweaver it looks ok but in some browsers its horrible.





When I turn the compatibility View on its not ok, bur if I turn it on its fine.

It goes like this...
How can you make a linked image to have a mouseover sound and image swap at the same time?

Please help.

Hey not even sure if this can be done with html or if i need to use something else but basically i want to make the thumbnails appear where the main image is when they are clicked on instead of opening a new tab like i have it set now.

http://whatashirt.com/shirts/swearing_is_caring.html

just want stuff under the more photos to appear where the main image is when clicked on

Thanks

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

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 .

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.

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>

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>