HTML Help

elsachmo · Joined: 10 Apr 2009 Posts: 3

I've made my background in Image Ready with slices that I made into rollover links to various websites. I get the source code html, replace the images with the links to the slices on my webhost, but now how do I make this my background on MySpace? I want to replace this code
Code: <style type="text/css">
body {
background-color: transparent;
background-image: url("http://elsachmo.com///1280x1024MyspaceBackLinks3.jpg");
background-attachment: fixed;}
</style>)

which is my current background, with the new version of the background I made with the rollover links. I still want it to look the same.

Edited by mod to insert code tags for readability.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

I don't think that's going to be that easy as you made image slices with rollovers.
Not going to get all those slices up in one background image call. If the rollovers use any JavaScript, and many do to keep IE happy, then you can't use it on MySpace as they filter any JS.

elsachmo · Joined: 10 Apr 2009 Posts: 3

Ok, maybe this might work. I also tried accomplishing this task by making an image map containing clear .gifs with links attached, and placed those clear .gifs on top of the sections of the background that I wanted to be "clickable". This works fine, until you start scrolling down the page, and then the image mapped clear link .gifs scroll with the page out of position. Is there a way to make this "fixed", so they don't scroll? Here's the code I have:

<span class="off">!-Create my Links using Clear Gif Image-!</span>
<div class="myL myL1" >
<a href="http://www.msplinks.com/MDFodHRwOi8vaXR1bmVzLmFwcGxlLmNvbS9XZWJPYmplY3RzL01aU3RvcmUud29hL3dhL3ZpZXdBbGJ1bT9pPTMwODU3MTk5NSZpZD0zMDg1NzE5OTQmcz0xNDM0NDE=">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL2">
<a href="http://www.msplinks.com/MDFodHRwOi8vaXR1bmVzLmFwcGxlLmNvbS9XZWJPYmplY3RzL01aU3RvcmUud29hL3dhL3ZpZXdBbGJ1bT9pPTMwNTU0MzA2MyZpZD0zMDU1NDI5OTImcz0xNDM0NDE=">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL3">
<a href="http://www.msplinks.com/MDFodHRwOi8vdHdpdHRlci5jb20vdGhlc21va2VqdW1wZXJz">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL4">
<a href="http://www.msplinks.com/MDFodHRwOi8vY2RiYWJ5LmNvbS93aWxkY2FyZG11c2lj">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<div class="myL myL5">
<a href="http://www.msplinks.com/MDFodHRwOi8vY2RiYWJ5LmNvbS9zYWNo">
<img src="http://x.myspace.com/images/clear.gif">
</a></div>

<span class="off">!-Use style to position and size-!</span>
<style>

div.myL {z-index:8}

{!-position and size link 1-!}
div.myL1 {position:absolute; top:130px; left:40px}
div.myL1 img {width:140px; height:140px}

{!-position and size link 2-!}
div.myL2 {position:absolute; top:355px; left:40px;}
div.myL2 img {width:140px; height:140px}

{!-position and size link 2-!}
div.myL3 {position:absolute; top:475px; left:1060}
div.myL3 img {width:189px; height:27px}

{!-position and size link 2-!}
div.myL4 {position:absolute; top:320px; left:40}
div.myL4 img {width:100px; height:25px}

{!-position and size link 2-!}
div.myL5 {position:absolute; top:570px; left:50}
div.myL5 img {width:100px; height:20px}
</style>

<style type="text/css">body{background-color:transparent; background-image: url("http://elsachmo.com///1280x1024MyspaceBackLinks3.jpg"); background-attachment: fixed;}</style>

And here's the page if you want to see what I'm talking about: www.smokejumperstexas.com

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3593 Location: Biloxi, MS

Well the last post is referring to your question posted here which I really didn't want to get into. I really don't like MySpace because they have no concept on how to code anything. Those pages break in so many browsers.

All I can say about your scrolling problem is to try to style those image with:

position: fixed;

Usually that will stop any scrolling. Usually a background image can be made fixed:

selector_name {
background: url{path to image} no-repeat center fixed;
}

That's for a non-repeating image to be centered in container.