Developers Archive for the 'Html tags and issues' Category

« Previous Entries
Next Entries »

Creating Mouse over Effect in Images using Javascript

Creating Mouse over Effect in Images using Javascript Thursday, February 15th, 2007

<html>

<head>

<script type=”text/javascript”>

function mouseOver()

{

document.logo.src=”blue_logo.gif” mce_src=”blue_logo.gif”

}

function mouseOut()

{

document.logo.src=”pink_logo.gif” mce_src=”pink_logo.gif”

}

</script>

</head>

<body>

<a href=”http://somesite.com” mce_href=”http://somesite.com” target=”_blank”>

<img border=”0″ src=”pink_logo.gif” mce_src=”pink_logo.gif” name=”logo” width=”30″ height=”30″ onmouseover=”mouseOver()” onmouseout=”mouseOut()” /></a>

</body>

</html>

In above example, we are displaying an image link in our we pages. On mouse over we are calling mouseOver() function and changing the image src.

In above case, by default “pink_logo.gif” is shown. On mouse over “blue_logo.gif” will be shown. Again On mouse out we are chaging image to “pink_logo.gif”.

This will give nice look and effect to our web pages.

Posted in Javascripts, Html tags and issues | No Comments »

Calling more than one JavaScript function in a body tag (or other) event handler

Calling more than one JavaScript function in a body tag (or other) event handler Thursday, February 15th, 2007

We may call more than one javascript function by seperating semi-colon as follows.

Example:

<body onload=”callFunction1();callFunction2();”>

In a mouseover, we can call as follows,

onMouseOver=”callFunction1();callFunction2();”>

In JavaScript, the semi-colon is essentially an end-of-line marker. Within reasonable limits, we can actually write a whole script inside of an event handler.

The same thing applies to the href=”javascript:etc” mce_href=”javascript:etc” structure. For instance:

<a href=”javascript:callFunction1();callFunction2();” mce_href=”javascript:callFunction1();callFunction2();”>
Click Here
</a>

Posted in Javascripts, Html tags and issues | No Comments »

How to get Cookie value through Javascript and displaying it in DIV tag:

How to get Cookie value through Javascript and displaying it in DIV tag: Wednesday, February 14th, 2007

In some cases we may have our webpages with PHP and HTML pages. If we want to display “Welcome {$username} Logout” if user loggedin and “Welcome Login Register” for new users means we can use innerHTML in javascript to achieve our goal.

In above case “{$username}” will be link to user account page. “Register” will link to registration page. “Logout” link to logout page.

<SCRIPT>

function getCookie(Name) {

var search = Name + “=”

if (document.cookie.length > 0) { // if there are any cookies

offset = document.cookie.indexOf(search)

if (offset != -1) { // if cookie exists

offset += search.length

// set index of beginning of value

end = document.cookie.indexOf(”;”, offset)

// set index of end of cookie value

if (end == -1)

end = document.cookie.length

return unescape(document.cookie.substring(offset, end))

}

}

}

function doit()

{

c=getCookie(”user_name”);

if(c==undefined){

document.getElementById(”login_show”).style.display=”block”;

}

else

{

var sHTML=”Welcome:   <a href=’myaccount.php’>”+uname+’</a>’;

sHTML =sHTML+”   <a href=’logout.php’>Logout</a>”;

loggedin_show.innerHTML = sHTML;

}

return false;

}

</SCRIPT>

We can use the above SCRIPT tag within HEAD tag.

getCookie is used to get the cookie names “user_name”. In doit function we can check whether cookie is available. If yes We can assign “Welcome {username} Logout” value to “loggedin_show” DIV. Otherwise we can show “login_show” DIV.

We can call above doit() function as follows.

<body onload=”return doit();”>

login_show div is shown below.

<DIV id=”login_show” style=”display:none”>

Welcome: <a href=”index1.php” mce_href=”index1.php”>Login</a>   <a href=”signup.php” mce_href=”signup.php”>Register</a>

</DIV>

Posted in Javascripts, Html tags and issues | No Comments »

« Previous Entries
Next Entries »
All material @ copyrighted by chrisranjana.com. If you want to link to this article you are welcome to do so. Unauthorized publication is strictly prohibited. This developer tutorial website contains articles by Php programmers , Software developers, Mysql programmers and asp c# programmers. This website also contains ajax tutorials and advanced mysql sql stored procedures and functions tutorials and sample codes.