javascript - Wordpress hover over link and several elements change -

-

this wordpress home page has following html content section (the middle section 3 columns of divs)

http://goodsense.etempa.co.uk

<div class="seewidgets">[widgets_on_pages id="home page middle box"]</div>  <div class="top-area">     <div class="image">         <img alt="primary care" src="/wp-content/uploads/scenarios/primary_care.png" />     </div>      <div id="contact_box" class="home_side_box">         <div class="clients">             <img alt="contact us" src="/wp-content/uploads/buttons/contact_button.png" />         </div>     </div>      <div class="home_side_box home_side_box_gap">         <div class="home_side_box_heading">social media</div>             //social media stuff         </div>          <div class="home_side_box home_side_box_gap">             <div class="home_side_box_heading">example clients</div>                 <div class="clients">                     <img alt="" src="/wp-content/themes/twentytwelve/images/client.png" />                            </div>             </div>              <div class="home_text_box" id="scenario_intro_text_div">                 <p>if work in primary healthcare know can happen. </p><p>your staff may required handle difficult ... <a href='/primary-care'>read more</a></p>             </div>         </div>     </div> </div>

as can see, there list of sectors on left, wordpress menu, central image, central text , on right, example client.

baring in mind website written in wordpress , content above entered in 'edit page' part of wordpress, not in template (although have complete access template files), can tell me way can have user hover on sector on left, , central image, central text , right hand side client image change match sector hovered over?

the main problem have list of sectors in wordpress menu , if possible, i'd stay way, can hard code if necessary.

you'll need use jquery.

this should started:

$('#menu-item-65').mouseover(function() {     // when element moused over, change html elsewhere on page     $('.top-area .image').html('<img src="path/to/your/image.jpg" />');     $('.home_side_box .clients').html('<img src="path/to/your/other/image.jpg" />');     $('#scenario_intro_text_div').html('<p>your text here</p>'); });

the first line means when #menu-item-65 (the id of 1 of individual lis left "sectors" navigation menu) mouseovered, replaces inner html of elements targeted inside function whatever specify.

relevant links:

your theme has jquery loaded, need include in custom scripts file , make sure it's loaded (either putting script call in header.php or adding via wp_enqueue_script in functions.php).


Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more