WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Organising javascript & dependant CSS files (2 posts)

  1. adsleeblythe
    Member
    Posted 1 year ago #

    Hi,

    Apologies in advance if I have posted in the wrong forum.

    I need a way to organise my javascript and css files in one place as my header.php file is going to get very large!

    I have just paid for a dreamweaver extension called 'tooltip magic' and provides additional information or context that pops up in a attractive box when users mouse over or click on text or images.

    I am using tooltip magic to display a tooltip when hovering over an image map hotspot. Please see my working example.

    As you can see, I have got this to work on my wordpress site by 'loading' the javascript file in the head (header.php) using:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/p7ttm/p7TTMscripts.js"></script>

    I have also included a link in my head to the appropriate stylesheet to make my tooltip look pretty:

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/p7ttm/p7TTM01.css" />

    What I am concerned with is the extra code in my head that will continue to grow as I create more image map hotspots.

    Below is the code that defines the tooltip for both image map hotspots in my working example:

    <script type="text/javascript">
      P7_opTTM('att:alt:pro','id:procourse','p7TTM01',1,300,5,1,1,0,10,0,300,0,1,1,0,0,0,0);
      P7_opTTM('att:alt:core','id:corecourse','p7TTM01',1,300,5,1,1,0,10,0,300,0,1,1,0,0,0,0);
    </script>

    HTML code for my image map:

    <img src="http://temp-cnet-training.com/wp-content/uploads/2012/07/cdcdp.gif" width="302" height="552" border="0" usemap="#Map" />
    <map name="Map" id="Map">
    <area shape="rect" coords="22,275,279,365" href="#" alt="pro" />
    <area shape="rect" coords="60,455,239,527" href="#" alt="core" />
    </map>
    <div id="procourse">This is the content of the tooltip.</div>
    <div id="corecourse">This is the content of the tooltip. This is the content of the tooltip.</div>

    Please can someone suggest to me how I can organise all this code!

    I have looked at the wp_enqueue_script() method of adding javascript to my wordpress pages but I am having trouble understanding it.

    Please please help!!!

  2. adsleeblythe
    Member
    Posted 1 year ago #

    OK I have organised the code that defines the tooltip for the image map hotspot by inserting it in the body of the page in the admin. I have installed the Allow Javascriptin Posts & Pages plugin and wrapped my code using the plugin's shortcodes:

    [js]
    P7_opTTM('att:alt:pro','id:procourse','p7TTM01',1,300,5,1,1,0,10,0,300,0,1,1,0,0,0,0);
    P7_opTTM('att:alt:core','id:corecourse','p7TTM01',1,300,5,1,1,0,10,0,300,0,1,1,0,0,0,0);
    [/js]

    In the head (header.php) I have inserted links to the relevant stylesheet and .js file:

    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/p7ttm/p7TTM01.css" />

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/p7ttm/p7TTMscripts.js"></script>

Topic Closed

This topic has been closed to new replies.

About this Topic