custom contact table? Options

[hippiehead025]

ok, so i made a contact table on Photoshop, its standard size. I also made another thats exactly the same, except the letters have a glowing outline. I want to make the contact table so that when you hover and/or click over the links on the cantact table, the word changes to the outlined version. IS there a code to do this? I know i'd have to slice each "button" on each table. And I know there are codes for changing images when you scroll over them. Would I just implement the image code for the switching images and then designate a link to each image? Thanks - Roger

[hippiehead025]

by the beginning, your talkin about the slicing tut, correct? - Roger

[hippiehead025]

Not quite sure how i'd do that.... can you enlighten please? Thanks

[hippiehead025]

So i'd do something like this???

CODE

<div class="contact_box">
<img src="">
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
<a href=""><img src=""></a>
</div>

Then

CODE

<style type="text/css">
a.Message
{float:left; background:url("URL") repeat; width:#px; height:#px; display:block; top:#px; left:50%; margin-left:#px;}

a.Message:hover
{float:left; background:url("URL") repeat;}
</style>

etc, etc.. ?

[hippiehead025]

cool. ty

[hippiehead025]

what goes at the top part of this code? the <img src= part ?

CODE

<div class="contact_box">
<img src="">
<a href="" class="message">&nbsp;</a>
<a href="" class="add">&nbsp;</a>
<a href="" class="IM">&nbsp;</a>
<a href="" class="rank">&nbsp;</a>
<a href="" class="block">&nbsp;</a>
<a href="" class="forward">&nbsp;</a>
</div>

And also I have 2 more blocks than that to be decribed ( add to group and favorite)

so would I just make these?

CODE

<a href="" class="favorite">&nbsp;</a>
<a href="" class="Group">&nbsp;</a>

Also i have splices that wont be links, so do I just insert them aswell with a

CODE

<a href=""</a>

?

[hippiehead025]

so ill do

CODE

<div class="contactbox">
<a href="" class="message">&nbsp;</a>
<a href="" class="add">&nbsp;</a>
<a href="" class="IM">&nbsp;</a>
<a href="" class="rank">&nbsp;</a>
<a href="" class="block">&nbsp;</a>
<a href="" class="forward">&nbsp;</a>
<a href="" class="favorite">&nbsp;</a>
<a href="" class="group">&nbsp;</a>
<img src=""> <---- times how many splices i have that wont be links
</div>

the a href is where i put the address of the link itself, correct?

then under it do

CODE

<style type="text/css">
a.Message{float:left; background:url("URL") repeat; width:#px; height:#px; display:block; top:#px; left:50%; margin-left:#px;}
a.Message:hover{float:left; background:url("URL") repeat;}


a.add{float:left; background:url("URL") repeat; width:#px; height:#px; display:block; top:#px; left:50%; margin-left:#px;}
a.add:hover{float:left; background:url("URL") repeat;}</style>

</style>

ect...


and it'll show up?

[hippiehead025]

i'm tryin to, but i need to know what goes where first, i dont know css or html.

ok one last question, where do i put in the images for the actual links ? in the div, or in the style part?

CODE

<div class="contactbox">
<a href=""><img src=""> class="message">&nbsp;</a>

like that?

[hippiehead025]

well, im lost here buddy. look at my profile. the contact table is f'd up.

www.myspace.com/rrippeon

[hippiehead025]

only probelm is you cant imagemap in music profiles.... so how do i do that?

nvm, i did this....

CODE

<style type="text/css">
.tg_contact {position:absolute; top:XXXpx; margin-left:XXXpx; left:50%; width:XXXpx; height:XXXpx; background-color:transparent; z-index:2;}
</style>

<div class="tg_contact">
</div>

<style>
a.email {position:absolute; top:xxxpx; left:50%; margin-left:-390px; z-index:3; width:xxxpx; height:xxpx; display:block;
background-image:url(URL FOR THE HOVER IMAGE HERE);}
a.email img {border:0px;}
a.email:hover {cursor:default;}
a.email:hover img {visibility:hidden;}
</style>

<a class="email" href="URL OF WHERE YOU WANT THE LINK TO GO TO HERE"><img src="URL FOR THE NON-HOVER IMAGE HERE" /></a>

then just repeated the a.XXX for each link.

Reason for edit: Please use the Edit button instead of double-posting. - Mike

[Mickey]

Topic closed & moved.