Nobody seems to understand my question

Sundaysbest0 · Jan 30, 2010

Okay here it goes. I have link A and picture A. When i scroll over link A I need picture A to change to picture B. When my mouse is no longer hovering over picture B I need it to change back to picture A.

Can somebody please show me the light?

Vestras · Jan 30, 2010

Code:

<html>
<head>
    <script type="text/javascript">
        function OnLinkMouseOver() {
            document.getElementById("picture").src = "newImgSrc.jpg";
        }

        function OnLinkMouseOut() {
            document.getElementById("picture").src = "oldImgSrc.jpg";
        }
    </script>
</head>
<body>
    <img alt="" src="somesrc.jpg" id="picture" />
    <a href="somepage.htm" onmouseover="OnLinkMouseOver()" onmouseout="OnLinkMouseOut()">Link</a>
</body>
</html>

Sundaysbest0 · Jan 30, 2010

now that link is at the bottem of the page. I want to put it at a specific set of coordinates. how do i move it?

Vestras · Jan 30, 2010

Sundaysbest0 said:
now that link is at the bottem of the page. I want to put it at a specific set of coordinates. how do i move it?

I don't think you can set a specific pixel point, you have to just build the website from top to bottom.

Sundaysbest0 · Jan 30, 2010

well then how would i go about getting that link in a certain spot?

Vestras · Jan 30, 2010

Sundaysbest0 said:
well then how would i go about getting that link in a certain spot?

By for example having a content div filling the main page and a footer div containing the link. If you set the content div's height to a certain amount in your css, you should see that the footer div gets positioned at the bottom.

Sundaysbest0 · Jan 30, 2010

i didint understand that at all. here, i dont know how nice you are haha but this is what i need done. I need ipod.jpg to have a link where the menu button is and then i need another link where the next button is and when you scroll over the next button the image changes to ipod2.jpg

those are the files

Vestras · Jan 30, 2010

I'm sorry, but I don't know how to do that. Look it up on google

phyrex1an · Jan 30, 2010

Use the html map+area tag instead of the a tag. Put the mouse events on the area tag.
http://reference.sitepoint.com/html/area

ertaboy356b · Jan 31, 2010

You need to do some CSS..

First you put the link on a div..

Code:

<div id="thisisme"><a href="link"><img src="img" /></a></div>

Now, you do some css..

At the <head> section, write this:

Code:

<style>
#thisisme { position: absolute; display: inline; top: <pixels from top>; left: <pixels from left>; }
</style>

modify the value of top and left that suits your needs. Also you may change top to bottom or left to right. if you want it fix, like when you scroll the screen the picture won't move, then change position to fixed.

TFlan · Feb 5, 2010

Don't do what ertaboy356b stated.

With what you want to do, an image map is what you need, as phyrex1an said.

http://www.google.com/#hl=en&source=hp&q=Creating+Image+Maps+html

Lyerae · Feb 5, 2010

Vestras said:

Code:

<html>
<head>
    <script type="text/javascript">
        function OnLinkMouseOver() {
            document.getElementById("picture").src = "newImgSrc.jpg";
        }

        function OnLinkMouseOut() {
            document.getElementById("picture").src = "oldImgSrc.jpg";
        }
    </script>
</head>
<body>
    <img alt="" src="somesrc.jpg" id="picture" />
    <a href="somepage.htm" onmouseover="OnLinkMouseOver()" onmouseout="OnLinkMouseOut()">Link</a>
</body>
</html>

CSS does this better.
Just use :hover.

codemonkey · Feb 5, 2010

Lyerae said:
CSS does this better.
Just use :hover.

How do you plan on doing that?

Lyerae · Feb 5, 2010

codemonkey said:
How do you plan on doing that?

What do you mean?

ertaboy356b · Feb 5, 2010

TFlan said:
Don't do what ertaboy356b stated.

With what you want to do, an image map is what you need, as phyrex1an said.

http://www.google.com/#hl=en&source=hp&q=Creating+Image+Maps+html

How come?? he want it on a specific pixel right? then why not use css positioning?

codemonkey · Feb 6, 2010

Lyerae said:
What do you mean?

I'd like to see the code, using no javascript, to make hovering over a link change an image elsewhere on the page.

Lyerae · Feb 6, 2010

Ah.
Seems I misunderstood the problem. My bad.

Drenferalis · Feb 7, 2010

Code:

.changeme:hover {css to change picture}
.changeme .dontchangeme:hover {css that doesnt change but still changes changeme on hover}

BUT i don't suggest using :hover as there are many Internet Browsers that dont support it very well. Like IE... Then you have to get css hacks, etc.

codemonkey · Feb 7, 2010

Drenferalis said:
Code:

.changeme:hover {css to change picture} .changeme .dontchangeme:hover {css that doesnt change but still changes changeme on hover}

BUT i don't suggest using :hover as there are many Internet Browsers that dont support it very well. Like IE... Then you have to get css hacks, etc.

You did not show what I asked. Please use a complete HTML document and that just seems like basic CSS to me.

Zerocaliber · Feb 8, 2010

Because you asked. Done only in CSS and HTML

Nobody seems to understand my question

New Member

Retired

New Member

Retired

New Member

Retired

New Member

Attachments

Retired

Staff Member and irregular helper

Old School Gamer

I could change this in my User CP.

I keep popping up on this site from time to time.

Code monkey not crazy, just proud.

I keep popping up on this site from time to time.

Old School Gamer

Code monkey not crazy, just proud.

I keep popping up on this site from time to time.

New Member

Code monkey not crazy, just proud.

New Member

Attachments

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors