html5 - Mouse Over an Image and Change Another -

-

this more difficult needs to explain...

essentially, i'm trying make mildly interactive website menu system in hovering on picture changes picture, in html5. i perfected actionscript 3 in flash cc, can see i'm trying accomplish here. attempting convert actionscript canvas html5 results in loss of actions applied. i'm sure simple operation, building off of simple 'change image mouseover', seen button or similar element. here code used in actionscript:

img1.visible=false; img2.visible=false; img3.visible=false; img4.visible=false;  mclip1.addeventlistener(mouseevent.mouse_over, mover2); mclip1.addeventlistener(mouseevent.mouse_out, mout2); mclip2.addeventlistener(mouseevent.mouse_over, mover); mclip2.addeventlistener(mouseevent.mouse_out, mout); mclip3.addeventlistener(mouseevent.mouse_over, mover3); mclip3.addeventlistener(mouseevent.mouse_out, mout3); mclip4.addeventlistener(mouseevent.mouse_over, mover4); mclip4.addeventlistener(mouseevent.mouse_out, mout4);  stop(); function mover(e:mouseevent):void {     img1.visible=true; }  function mout(e:mouseevent):void {     img1.visible=false;     gotoandstop(5); } function mover2(e:mouseevent):void {     img2.visible=true; }  function mout2(e:mouseevent):void {     img2.visible=false;     gotoandstop(10); } function mover3(e:mouseevent):void {     img3.visible=true; }  function mout3(e:mouseevent):void {     img3.visible=false;     gotoandstop(15); } function mover4(e:mouseevent):void {     img4.visible=true; }  function mout4(e:mouseevent):void {     img4.visible=false;     gotoandstop(20); }

i have 4 images in menu displayed, , 4 hovered over.

this code one selection:

img1.visible=false;  mclip.addeventlistener(mouseevent.mouse_over, mover); mclip.addeventlistener(mouseevent.mouse_out, mout);  function mover(e:mouseevent):void {     img1.visible=true; }  function mout(e:mouseevent):void {     img1.visible=false; }

additionally, add ability have hyperlinks each of selections (as is menu). thanks!

assuming have image change tv.jpg, images hover on work.jpg, team.jpg, , contact.jpg, , altered-tv images show when 1 of 3 images hovered over: tvwork.jpg, tvteam.jpg, tvcontact.jpg:

html code:

<img src="tv.jpg" id="tochange" />  <img src="work.jpg" class="image" data-src="tvwork.jpg" />    // data-attribute used store custom data, such source <img src="team.jpg" class="image" data-src="tvteam.jpg" /> <img src="contact.jpg" class="image" data-src="tvcontact.jpg" />

javascript (with jquery):

$(".image").each(function() {     $(this).hover(function() {    // mouseenter event handler         $("#tochange").attr("src", $(this).attr("data-src"));     }, function() {               // mouseleave event handler         $("#tochange").attr("src", "tv.jpg");    // revert original image (tv.jpg)     }); });

this changes src attribute of first <img> different 1 on mouseenter, , reverts on mouseleave. (this can done regular js, jquery easier. can use same logic).

note: code untested. please comment if have errors.

also, if want hyperlinks, add them around image elements. example:

<a href="[hyperlocation_url]"><img src="contact.jpg" class="image" data-src="tvcontact.jpg" /></a>

see this jsfiddle example (i tried replicate yours best --- sorry low-res pictures).


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more