FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Javascript





zjosie729
I'm not exactly sure that this is done by Javascript.
But if you know how to do this even with other scripts and stuff, please tell me. Thanks.

When I link an image using the <a href=""> code, the image has a thick border around it (usually blue). Is there anyway I can get rid of it?

Using the a:hover{} CSS code, I can easily change the size, color, and text decoration of a linked when moused over. But is there anyway I can change the written text and its properties? Same with images, when I mouse over an linked image, what codes would I use to make the image change?

What codes should I use to make a whole paragraph of text change when I hover to something else (like a button)?
jasperlevink
zjosie729 wrote:

When I link an image using the <a href=""> code, the image has a thick border around it (usually blue). Is there anyway I can get rid of it?


Code:
<img src="img.gif" border=0>


Quote:

Using the a:hover{} CSS code, I can easily change the size, color, and text decoration of a linked when moused over. But is there anyway I can change the written text and its properties? Same with images, when I mouse over an linked image, what codes would I use to make the image change?

What codes should I use to make a whole paragraph of text change when I hover to something else (like a button)?


Google for "tutorial javascript dynamic content". The you'll find what you'll need!

Grtz.
dandelion
Perhaps you should use the CSS equivalent of the deprecated border attribute as shown below.
Code:
a img { border: none; }

Place the code into the style element in the head section or into an external style sheet.
Ranfaroth
For hovering, try this example :
CSS :
Code:
...
p {color : #000; background-color : #fff}
span:hover + p {color : #33f}
...
XHTML :
Code:
...
<span>hover me</span>
<p>let's see</p>
...


Or more complex :

CSS :
Code:
...
.c:after {content : 'text 1'}
.h:hover + .c:after {content : 'text 2'}
...
XHTML :
Code:
...
<span class="h">hover me</span>
<span class="c">let's see : </span>
...
assex
I'm not so advanced a programmer to know how to change the content of a paragraph so that you see something else when you move your mouse over some button or something like that.

I know how to change an image when you move your mouse over it though. I also know how to make the border of the image disappear if you keep it as a link.

Let's say you have an image called image.gif. You want it to be a link to the homepage of your site : index.htm. You want no coloured border and you want it to change to image_over.gif when the user's mouse hovers upon it. Here's the HTML Code:

Quote:
<a href="index.htm" onMouseOver="over()" onMouseOut="out()"><img src="image.gif" name="image" border=0></a>


Now, insert this into the <head> of your page:

Quote:
<script type="text/javascript">
function over()
{
document.image.src="image2.gif"
}
function out()
{
document.image.src="image.gif"
}
</script>


CAUTION: You must preload the file image2.gif to make sure the page looks normal and the image appears immediately after the user hovers over the link. To do so, do this:

Quote:
<script type="text/javascript">
pimg = new Image ( )
pimg.src="image2.gif"
</script>
Related topics
Drag images (Javascript)
PB PHP, Iframe and Javascript
Clock-javascript
javascript: needed script for displaying window
Handling Css using Javascript
Navigation Script (javascript) Help Please!
resolution detection with javascript
A Useful Javascript
Tutorial: Image Rollovers w/ Javascript
Save webpage source into javascript variable
Professional JavaScript For Web Developers
Nice site for Javascript
Language
javascript free code
Reply to topic    Frihost Forum Index -> Scripting -> Others

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.