Is there anyway to give image MouseOver with HTML, DHTML, or CSS?

0 ⤊

Is there anyway to give image MouseOver with HTML, DHTML, or CSS?

I've looked all over Google and Ask and I can't seem to find a MouseOver that uses JUST HTML, DHTML, or CSS AND works. If you know this off the top of your head, or know where to find it or a generator, please and thank you.

2007-03-13 13:45:35 · 4 answers · asked by Short Tech 1 in Computers & Internet ➔ Programming & Design

4 answers

2007-03-13 13:49:35 · answer #1 · answered by Rex M 6 · 0⤊ 0⤋

i'm undecided approximately DHTML, yet i recognize that HTML is Hyper-text textile Markup Language.. erm, i think of. that's one in all those cyber web programming language which permits you to do incredibly much something. yet that's the place the incredibly much comes into play, HTML can no longer do dynamic issues lots of the time, so as that's the form you get own abode page, CSS, etc. they're a sorta- greater acceptable version of HTML.

2016-10-02 02:00:45 · answer #2 · answered by ? 4 · 0⤊ 0⤋

yes, it's kind of a hack, but it uses a CSS class called hover.

see here:
http://www.tutorio.com/tutorial/pure-css-image-rollovers
http://www.webmasterworld.com/forum83/4224.htm
http://moneytreesystems.com/css/picpopup.html

2007-03-13 13:58:42 · answer #3 · answered by BigJohnny 4 · 0⤊ 0⤋

Funny enough I've been writing a tutorial on that very subject - here's how I do things like that - works real sweet

Here's the HTML for a navigation area:

and the various CSS you need to make it display correctly - which you can of course play around with.

div#navigation{
float:left;
width:170px;
margin: 0px;
padding: 0px;
}

#navigation ul span{ display: none}

#navigation ul {
width: 170px;
margin: 0px;
text-align: left;
padding-left: 20px;
padding-top: 80px;
float: left;
}

#navigation li {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 170px;
}

#navigation li a {
margin-top: 10px;
_margin-top: 5px;
margin-bottom: 5px;
display: block;
width: 170px;
height: 30px;
color: #000;
text-decoration: none;
font-size: 2.2em;
border-bottom-width: 2px;
border-bottom-style: dotted;
border-bottom-color: #004B4B;
border-top-style: none;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-left-style: none;
}

/* test \ test */
#navigation li a {
padding: 0px;
}

#navigation li a:hover {
border-bottom-color: #fff;
}

#multimediabutton a{
background-image: url(images/nav/multimedia.gif);
background-repeat: no-repeat;
background-position: left top;
}

#multimediabutton a:hover{
background-image: url(images/nav/multimedia-b.gif);
background-repeat: no-repeat;
background-position: left top;
}

#websitebutton a{
background-image: url(images/nav/websites.gif);
background-repeat: no-repeat;
background-position: left top;
}
#websitebutton a:hover{
background-image: url(images/nav/websites-b.gif);
background-repeat: no-repeat;
background-position: left top;
}

#printbutton a{
background-image: url(images/nav/print.gif);
background-repeat: no-repeat;
background-position: left top;
}
#printbutton a:hover{
background-image: url(images/nav/print-b.gif);
background-repeat: no-repeat;
background-position: left top;
}

#directypebutton a{
background-image: url(images/nav/directype.gif);
background-repeat: no-repeat;
background-position: left top;
}
#directypebutton a:hover{
background-image: url(images/nav/directype-b.gif);
background-repeat: no-repeat;
background-position: left top;
}

Hopefully the way it's all laid out will make sense in dreaweaver - or whatever editor you're using - the names should all clearly tie in with each other and you'll easily be able to adjust the names and CSS properties to suit your own needs

2007-03-14 03:09:08 · answer #4 · answered by circusmort 5 · 0⤊ 0⤋