Mouse over advice needed.

**theremotedr** · 01-29-2012, 08:33 PM

I have been playing with my Ebay listing page by making it look a little more professional than basic.
I have introduced a mouse over affect with 3 photos i have added to the page just to make it better but would like some further help if i may.
Lets say i have the main photo named "A" and two other photos below it named "B" and "C".
When the Ebay page is first viewed photo "A" is displayed correctly at the top in the main position,if you then move your mouse over photo "B" or "C" this image is now shown where photo "A" was just shown in the main position.
This is how i want it to be done & works fine BUT when you move your mouse off photo "B" or "C" it is still shown in the main photo space,i need it to revert back to photo "A" when the mouse is not over the smaller images.
So far i can only make this happen if you leave & return to the page or refresh it.

Can anyone advise a code or string of text which would enable me to complete my goal.

**theremotedr** · 01-29-2012, 09:15 PM

Looking at the codes for this page i see the following.

One smalll photo i use is on line 147
another small photo i use is on line 149
The main photo is on line 139
The photos stay on the same line as mentioned above.
Now on the small photos within the code i see the following class="biankuang2" onmouseover="fda(this.src)" width="125" height="86" vspace="2"></td>
Now not knowing code can we somehow introduce the correct way of offmouseover show the photo on the line 139
Even though its not the correct way of typing it you know what i mean,,,dont you ?

**coothead** · 01-30-2012, 09:31 AM

Hi there theremotedr,

here is an example, that may be of interest to you...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS swap image</title>

<style type="text/css">
body {
    -webkit-animation: bugfix infinite 1s;  /* Safari adjacent sibling bug fix */
    background-color:#f0f0f0;
 }
@-webkit-keyframes bugfix {                /* Safari adjacent sibling bug fix */
    from { padding: 0; } to { padding: 0; } 
 }
#container {
    position:relative;
    width:384px;
    height:348px;
    padding:12px;
    border:1px solid #222;
    margin:20px auto;
    background-color:#555;
    box-shadow:#333 10px 10px 20px;
 }
#a {
    position:absolute;
    width:382px;
    height:254px;
    border:1px solid #f00;
    top:10px;
    background-image:url(blood.jpg);
    background-size:100%;
    box-shadow:#222 4px 4px 8px;
 }
#b,#c,#d {
    position:absolute;
    width:118px;
    height:78px;
    border:1px solid #000;
    top:278px;
    background-image:url(buddha.jpg);
    background-size:100%;
    box-shadow:#222 4px 4px 8px;
    cursor:pointer;
 }
#c  {
    left:142px;
    background-image:url(autumn.jpg);
 }
#d  {
    left:274px;
    background-image:url(col.jpg);
 }
#b:hover,#c:hover,#d:hover { 
    opacity:0.6;
 }
#b:hover+div+div+div {
    background-image:url(buddha.jpg);
    border-color:#fef47a;
 }
#c:hover+div+div {
    background-image:url(autumn.jpg);
    border-color:#f93;
 }
#d:hover+div {
    background-image:url(col.jpg);
    border-color:#6785b7;
 }
</style>

</head>
<body>

<div id="container">
 <div id="b"></div>
 <div id="c"></div>
 <div id="d"></div>
 <div id="a"></div>
</div>

</body>
</html>

coothead

**theremotedr** · 01-30-2012, 09:53 AM

Your example works perect and is what i am looking for it to do.

These photos get changed as and when i sell something on ebay so i need the code to point to line 139 regardless of what code is in the line that is from photobucket etc.

The next step is not knowing much about html code etc how or where would i put this code into the correct place so it would work.

Thank,i could send you the html file to look at if need be.

**manideep** · 01-31-2012, 04:03 PM

hi exmaple is nice but provide some screen shot for the output of that example ,then it will be more understandable...

thank u ...

**theremotedr** · 01-31-2012, 04:11 PM

I found this.
http://www.auctionsupplies.com/practice/ebay.shtml

Copy the code above and paste it into the box on the screen from the link supplied.
Its a site that allows you to check your ebay html etc but this code works within it and perfect but i need it to be altered so it can work for me.
Anybody willing to help would be nice.
Or please send pm etc so we can discuss it.

**coothead** · 02-03-2012, 09:19 AM

Hi there theremotedr,

The code below looks OK, when tried out here.

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://i670.photobucket.com/albums/vv62/ipbr21054/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to a.....</title>

<style type="text/css">
body {
    -webkit-animation: bugfix infinite 1s;  /* Safari adjacent sibling bug fix */
    margin:12px;
    background-color:#f0f0f0;
 }
@-webkit-keyframes bugfix {                /* Safari adjacent sibling bug fix */
    from { padding: 0; } to { padding: 0; } 
 }
#container {
    width:1023px;
    border:4px solid #111;
    margin:auto;
    background-color:#5d0e13;
    box-shadow:#333 10px 10px 20px;
 }
#header {
    display:block;
    width:1023px;
    height:130px;
    border-bottom:8px solid #000;
 }    
#content {
    width:991px;
    height:536px;
    padding-top:38px;
    border-right:4px solid #000;
    border-left:4px solid #000;
    margin:auto;
    background-image:url('WEBSITE%20PHOTOS/backgroundflames.jpg');
    overflow:visible;
 }
#picture {
    position:relative;
    width:658px;
    margin:auto;
 }
#a {
    position:absolute;
    width:640px;
    height:480px;
    border:9px solid #352929;
    background-image:url('NEW%20EBAY/SMARTKEYPADFULL.jpg');
    background-size:100%;
    box-shadow:#000 8px 8px 16px;
 }
#b,#c,#d {
    position:absolute;
    width:122px;
    height:91px;
    border:1px solid #fc9;
    top:552px;
    left:67px;
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
    background-size:100%;
    box-shadow:#000 4px 4px 8px;
    cursor:pointer;
 }
#c  {
    left:256px;
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
 }
#d  {
    left:447px;
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
 }
#b:hover,#c:hover,#d:hover { 
    opacity:0.7;
 }
#b:hover+div+div+div {
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
    border-color:#527eab;
 }
#c:hover+div+div {
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
    border-color:#527eab;
 }
#d:hover+div {
    background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
    border-color:#527eab;
 }
#ebay-paypal {
    width:991px;
    height:116px;
    padding:3px 0;
    border-right:4px solid #000;
    border-left:4px solid #000;
    margin:auto;
    background-image:url('WEBSITE%20PHOTOS/bmw.jpg');
 }
#ebay {
    float:left;
    width:103px;
    height:116px;
    border:1px solid #fc9;
    margin-left:31px;
    box-shadow:#000 4px 1px 6px;
 }
#paypal {
    float:right;
    width:115px;
    height:106px;
    border:1px solid #fc9;
    margin:5px 25px 0 0;
    box-shadow:#000 4px 1px 8px;
 }
</style>

</head>
<body>

<div id="container">

<img id="header" src="WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content">

<div id="picture">
 <div id="b"></div>
 <div id="c"></div>
 <div id="d"></div>
 <div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content -->

<div id="ebay-paypal">
<img id="ebay" src="WEBSITE%20PHOTOS/topratedseller.jpg" alt="ebay">
<img id="paypal" src="WEBSITE%20PHOTOS/paypalverified.jpg" alt="paypal">
</div><!-- end #ebay-paypal -->

</div><!-- end #container -->

</body>
</html>

coothead

**theremotedr** · 02-03-2012, 09:25 AM

Hello Coothead.
Can you write a code so i can use it on my ebay page.
What you have works great for me.
I dont mind making a donation.
I can send you the html code to look at,and would appreciate it if you have the time.
When i mentioned about i need it altered so it will work for me i did not mean it did not work on the link i supplied.
I mean i need this code altered etc so it could work the way i need it to work.
I use 1 main photo and 2 small photos.
Please can you help me coothead.

Thanks very much.