Still learning as I go along with this CSS lark... I'm now stuck on another concept - wonder if anyone can help?! 10points for a good answer don't forget! haha :o)
If, for example, you've got div1 and div2 on a page... and you've made an orange coloured button (out of a gif image) in div1...
Is there any way to set it, so that when you roll over that orange button, it displays a bit of text in div2? ...and then when you move off the button the text goes away again...
I want to do it without using java too - is that possible?!?
2007-01-11 21:58:55 · 4 answers · asked by crafty1980 1 in Computers & Internet ➔ Programming & Design
I'm not allowed to use javascript...
It's for a MySpace page - which I know all you Internet boffins hate - but It's something I enjoy playing about with!
Plus it was a good learning tool for CSS etc! so much so that I've already used my basic skills to make my first website so I have MySpace to thank for somethings!
Just a shame that MySpace doesn't allow the use of javascript! :o(
Think I might do it all in Flash instead! - I can do that...
2007-01-12 00:50:17 · update #1
This is very possible.
However, you'll need to put the second div inside the first.
And to get the rollover to work with IE 6 (which is the eternal issue with CSS, I guess) you'll actually have to make that first div a link (using the "A" tag).
You'd have a bit of HTML that looked something like this:
Button text here
Rollover text here
You need to give the link a class, like the "rolloverlink" part here, so that you can refer to it in the CSS code. (Because MySpace blocks the "#" sign, there's no way to use an ID; thus I used a class instead.)
Now you just add a bit of CSS like this:
This says that normally, the div inside of our link shouldn't be displayed at all (display: none). When we "hover" our mouse over the link, though, the div will appear (display: block).
You have to use a link because IE 6 won't recognize ":hover" on divs, or any other element except for links.
You can take this a step further and absolute position the div somewhere else on the page. It'll still be attached to the link, and when the user rolls over the link, the div will appear in the spot you've positioned it.
And of course you'll want to style .rolloverlink to look like your button.
Hope that helps! :)
2007-01-13 10:41:04 · answer #1 · answered by Stephen H 2 · 0⤊ 0⤋
Its actually called Javascript! Java is something totally different!
I don't think its possible without using a language of some kind.
Javascript being the normal one. I've done this with css and javascript its relatively simple even writing the javascript.
I haven't got time to code it but it is really simple check the example.
Get the one I always use in my pages! :)
Then all you need to do is load it on your page and use it on the buttons
CSS is the style and appearance of items and you need a behavior which is where the javascript comes in so I dont think it is possible without having another language to do the behavior.
You need to get the script then put a header in your page which reads (in xhtml):
See source url!
There is many other methods of doing this too, I have used another piece of javascript which basically swaps classes of css on your element on your pages (and then stores them in a cookie like prefs). This is a slightly different method tho and I only really use it to change the whole site's styles by clicking one link!
This isn't quite the way I would do it but its on the right track, plus it'll do to start you off :)
2007-01-12 06:10:52 · answer #2 · answered by ? 4 · 1⤊ 0⤋
In div 1 the button graphic would be orange, in div 2 use a second button graphic, orange with text. Would that work?
You're having better success with CSS than me :( !
2007-01-12 06:05:58 · answer #3 · answered by sarah c 7 · 0⤊ 0⤋
basically, i think it's not possible or if ever, it's not officially accepted as a web standard...
css purpose is for designs, to style elements
html, like divs are for structuring
javascript, not java (as this are applets if used in site and compiled and more complicated), is for interactive purposes, and that's it, your question can be answered by javascript, not java
so here's the code
onmouseout="document.getElementById('div2').innerHTML=''">2007-01-12 06:13:23 · answer #4 · answered by Ken 3 · 0⤊ 1⤋