jqplotでつかったグラフの横にマウスオーバーしたら画像を表示

javascript javascript jquery

class1 class2 class3 を使って無理やりに．
親要素のclass3を取得して，そこに書き出す．

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tryjquery_hide_p test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<!-- <script type="text/javascript" src="jquery.tablesorter.js"></script> -->
<link href="./css/flexigrid.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/flexigrid.js"></script>
 <script type="text/javascript" src="js/jquery.sparkline.js"></script>
<!--[if lt IE 9]>
    <script language="javascript" type="text/javascript" src="excanvas.min.js"></script>
<![endif]-->
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<!-- This is options -->
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.logAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="js/plugins/jqplot.highlighter.js"></script>


<link rel="stylesheet" type="text/css" href="js/jquery.jqplot.min.css" />

<script>
$(document).ready(function(){

     
       $("input:button#test3").click(function(){
       		<!-- v2=[[17,2.14,"コカコーラ"]]-->
       		
       		<!-- v2[0][0]=17-->
       		v3a=[];
       		v3b=[]
       		v3c=[]
       		v3a.push(v2a);
       		v3b.push(v2b);
       		v3c.push(v2c);
       		
       		
      	 	 $("div.p1").jqplot(
       					 'jqPlot-sample2',
       					v3a
       			 ,
        {
        	axes: {
        		xaxis: {
        			label:"x",
        			
             	    min: 10, 
               		  max: 25 
 				},
 				yaxis: {
 					label: "y",
        			
        			
               		renderer: $.jqplot.LogAxisRenderer 
 				}
            },	
            
        	 highlighter: {
        	     show: false,
   			     sizeAdjust: 7.5,
   				showTooltip: true
     		},
        
           	seriesDefaults: {
             		   color: '#7dffc7',
         		       showLine: false,
               			markerOptions: {
               		    size: 8
                		},
                		pointLabels: {
               	   	 	 	show: true,
                	    	location: 'n',
                   			 ypadding: -12,
                   			 escapeHTML: false 
              			 }
            }
        }
        );
        
      
        $("div.p2").jqplot(
       					 'jqPlot-sample2',
       					v3b
       			 ,
        {
        	axes: {
        		xaxis: {
        			label:"x",
        			max: 3,
        			min: 1,
 				},
 				yaxis: {
        			label: "y",
        			
        			
               		renderer: $.jqplot.LogAxisRenderer 
 				}
            },	
            
        	 highlighter: {
        	     show: false,
   			     sizeAdjust: 7.5,
   				showTooltip: true
     		},
        
           	seriesDefaults: {
             		   color: '#7dffc7',
         		       showLine: false,
               			markerOptions: {
               		    size: 8
                		},
                		pointLabels: {
               	   	 	 	show: true,
                	    	location: 'n',
                   			 ypadding: -12,
                   			 escapeHTML: false 
              			 }
            }
        }
        );
        
         $("div.p3").jqplot(
       					 'jqPlot-sample2',
       					v3c
       			 ,
        {
        	axes: {
        		xaxis: {
        			label:"x",
             	   min: 10,
               		 max: 25
 				},
 				yaxis: {
        			label:"y",
        			max: 3,
        			min: 1,
               		renderer: $.jqplot.LogAxisRenderer 
 				}
            },	
            
        	 highlighter: {
        	     show: false,
   			     sizeAdjust: 7.5,
   				showTooltip: true
     		},
        
           	seriesDefaults: {
             		   color: '#7dffc7',
         		       showLine: false,
               			markerOptions: {
               		    size: 8
                		},
                		pointLabels: {
               	   	 	 	show: true,
                	    	location: 'n',
                   			 ypadding: -12,
                   			 escapeHTML: false 
              			 }
            }
        }
        );
        
       //ここがポイント 
        $('div[class2^="pp"] .fig1').hover(
        	function(){
        		  text1=$(this).html(); 
        		 //text1=$(this).attr("href"); 
        		 //alert(text1);
        		 link1=$(this).attr("link");
        		var f32=$(this).parents('div[class2^="pp"]');
        		f32=f32.attr("class2");
        		
        		$('div[class3="'+f32+'"]').html('<div id="tmp3"></div>');
        		
        		$(this).append('<div id="tmp2"></div>'); 
        		<!-- alert(link1);-->
        		<!-- $(this).append('<p id="tmp2"></p>');-->
        		  $("#tmp2").append(text1); 
				
				<!-- alert(link1);-->
				//alert('div[class2="'+f32+'"] #tmp3');    
				$('div[class3="'+f32+'"] #tmp3').append('<a href="'+text1+'"> <img src="'+link1+'"/></a>');

        	},
        	function(){
        		$("#tmp2").remove();
        	}
        );
        
       
     });
     
   
     
});



</head>
<body>
  <!-- <div class="file"> -->
  <h1>TEST</h1>
  <hr>
  <h2 id=ranking> </h2>
   <p id="time"></p>
  <input type="button" id="test1" value="test1" />
  <input type="button" id="test2" value="test2" />
  <input type="button" id="test3" value="test3" />
  <!-- <div id="tmp1"></div> -->
   <table id="myTable" class="test">
   <thead>
   </thead>
   <tbody>
   </tbody>
   </table>
   

 <hr>
 <h2>Test2</h2> 

<center> 
<p class="graph1">xxx</p> 
 <table>
 <tr>
 <td>
 <div class2="pp1" class="p1" id="jqPlot-sample" style="height: 500px; width: 500px;"></div> 
 </td>
 <td>
<div class3="pp1" id="tmp_fig" style="height: 500px; width: 500px;"></div> 
 </td>
 </tr>
 </table>
</center>
 
 <center> 
 <p class="graph1">yyy</p>
 <table>
 <tr>
 <td>
 <div class2="pp2" class="p2" id="jqPlot-sample2" style="height: 500px; width: 500px;"></div>
 </td>
  </td>
 <td>
<div class3="pp2" id="tmp_fig" style="height: 500px; width: 500px;"></div> 
 </td>
 </tr>
 </table>
 </center>
 
  <center>
  <table>
<p class="graph1">zzz</p>
 <tr>
 <td>
 <div class2="pp3" class="p3" id="jqPlot-sample3" style="height: 500px; width: 500px;"></div>
 </td>
  <td>
<div class3="pp3" id="tmp_fig" style="height: 500px; width: 500px;"></div> 
 </td>
  </tr>
  </table>
  </center>
  
   
 
  <!--	</div> -->
</body>
</html>