www.webdeveloper.com
Results 1 to 3 of 3

Thread: function/mouseover event help

  1. #1
    Join Date
    Nov 2012
    Location
    Florida
    Posts
    2

    function/mouseover event help

    Hi im working on a project and im having problems creating a function to increase the font size of three different divisions 25% using "onmouseover" and return to normal using "onmouseout". The three division ids are "objectives","details", and "submission". I've been playing with it for a while and i dont have much but here is the start. Thank you for viewing and any information in the right direction would be greatly appreciated.


    <br/>
    function divFontSize()

    {

    document.getElementById("objectives").style.fontsize="125%";


    }


    <div id="objectives" onmouseover="divFontSize ()" onmouseout="" > </div>




    <br/>

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    In this case your function will be more dynamic if you send the element you want to change as an argument to the function instead of using getElementById(). This way you can use the same functions for all your div elements.


    Code:
    <script type="text/javascript"> // All JavaScript must be encased in <script> tags.
    
    
    function showLargeFontSize(element) // One function for increasing the size.
    {
    	element.style.fontSize = "125%"; // 'element' is the div you're hovering over. Note the uppercase S in fontSize.
    }
    
    
    function showSmallFontSize(element) // And one function for resetting the size.
    {
    	element.style.fontSize = "100%";
    }
    
    
    </script>
    
    
    <div id="objectives" onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">"this" refers to this div element.</div>
    <div onmouseover="showLargeFontSize(this)" onmouseout="showSmallFontSize(this)">Another div.</div>

    (Remember that uppercase and lowercase matters in JavaScript.)


    You could also combine those functions if you add the font size as an argument.


    Code:
    <script type="text/javascript">
    
    
    function setFontSize(element, size)
    {
    	element.style.fontSize = size;
    }
    
    
    </script>
    
    
    <div id="objectives" onmouseover="setFontSize(this, '125%')" onmouseout="setFontSize(this, '100%')">Hello.</div>

  3. #3
    Join Date
    Nov 2012
    Location
    Florida
    Posts
    2
    Thanks for the help, many thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles