Web design

Lexluethar · Feb 13, 2012

I'm a noob when it comes to websites. I'm creating a small website to sell items online for someone.

Honestly the only experience i've had in the past is Flashed based websites or HTML (using frontpage and now publisher).

Currently i'm creating a site in publisher (before bashing the program keep in mind this is NOT my full time job and i have no desire to learn much about web design, i'm sure there are much more versatile tools out there). I have the site designed and layout done.

I'd like to have buttons that interact when the cursor goes over them, it's a target button and when you scroll over it it'd like the target button to change from a full target to a broken one.

What would be the best method to accomplish this? I know i can imbed flash to get something to play, but i didn't know how to get that to just 'play' when someone scrolls over it.

Baez · Feb 13, 2012

Lexluethar said:
I'd like to have buttons that interact when the cursor goes over them, it's a target button and when you scroll over it it'd like the target button to change from a full target to a broken one.

Can you elaborate more on this? I'm not sure what you mean by changing the full target to a broken one.

Lexluethar · Feb 13, 2012

When you hover over the buttons I would like them to interact so that they move.

kmote · Feb 13, 2012

Javascript?

Lexluethar · Feb 13, 2012

Can i embed that into an html page?

kmote · Feb 13, 2012

Lexluethar said:
Can i embed that into an html page?

Code:

<html>
    <head>
        <script type="text/javascript">
            function a(element) {
                element.value="hello";
            }
            function b(element) {
                element.value="world";
            }
        </script>
    </head>
    <body>
        <input type="button" value="mouse here" onmouseover="a(this)" onmouseout="b(this)" />
    </body>
</html>

Baez · Feb 13, 2012

No need to use javascript for simple hover functionality like that.

CSS provides a :hover state just for that purpose.

In web design, always try to limit scripting as much as possible.

kmote · Feb 14, 2012

Baez said:
No need to use javascript for simple hover functionality like that.

CSS provides a :hover state just for that purpose.

In web design, always try to limit scripting as much as possible.

Fair enough.

Lexluethar · Feb 14, 2012

If i embed that into the HTM code would it work that way or is there something else that needs to be done to get CSS to work with an HTML page?

Baez · Feb 14, 2012

You can either create a css file dedicated for that or apply the css directly at the top of the html file inside the <head> tags. If you need an example I can provide one.

Web design

Lexluethar

Fully Optimized

Baez

Admin / Dev

Lexluethar

Fully Optimized

kmote

Seg Fault'n,

Lexluethar

Fully Optimized

kmote

Seg Fault'n,

Baez

Admin / Dev

kmote

Seg Fault'n,

Lexluethar

Fully Optimized

Baez

Admin / Dev

Similar threads