Member Avatar for nova37

hello
i got alexa charts links from internet today

<!--Daily Traffic Rank Trend-->
<script language="JavaScript" type="text/javascript" src="http://xsltcache.alexa.com/traffic_graph/js/g/b/6m?&amp;u=http%3A%2F%2Fwww.yoursite.com+++++"></script>
<!--Daily Traffic Rank Trend-->
<img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=t&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;">
<!--Daily Reach in Percent-->
<img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=r&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;">
<!--Daily Page Views-->
<img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=p&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;">

i want to insert them in html form with few button for every chart and want to load new chart once user click another button i mean without reloading entire page ,.... i do not know ajax much more so need help

thanks

  • 2 Contributors
  • 3 Replies
  • 206 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Taywin

Recommended Answers

All 3 Replies

Member Avatar for Taywin

There are many ways to do it. You could load them all, display them in the same location, and manipulate the display using display or z-index property. You could also dynamically call each of them from their original site (not a preferable way). How do you construct your HTML?

Member Avatar for nova37

hmmmm i think i should use javascript with it :)

Member Avatar for Taywin

OK, you could do that :) Let see... Below is just a sample. By default, the trend rank is displayed when the page is loaded.

In the display, what it does is to place each image in a container (div) with absolute location. Then place all of these containers inside another container (div) to hold all images in one location. Then assign the first image to be on top of every other images.

There are 3 buttons assigned to view each image. When click on one buttone, only the selected image will be place on top of all other images. Therefore, the selected image is being displayed while others are hiding behind the selected image.

<head>
<!--Daily Traffic Rank Trend-->
<script language="JavaScript" type="text/javascript" src="http://xsltcache.alexa.com/traffic_graph/js/g/b/6m?&amp;u=http%3A%2F%2Fwww.yoursite.com+++++"></script>

<script type="text/javascript">
// contain all image ID div for swapping z-index
var allImgTrends = ["daily_traffic_rank", "daily_reach_percent", "daily_page_views"]

function showImage(idx) {  // display the calling index image
  if (!isNaN(idx) && idx>=0 && idx<allImgTrends.length) {  // valid index value
    // iterate through each image
    var el
    for (var i=allImgTrends.length-1; i>=0; i--) {
      el = document.getElementById(allImgTrends[i])
      if (el) {  // ensure that the element exists
        if (idx==i) { el.style.zIndex = 10 }  // the selected image index, show
        else { el.style.zIndex = -1 } // not the selected image index, hide
      }
    }  // end each image
  }  // end valid index argument
}  // showImage()
</script>
</head>

<body>
 <!-- set the specific width & height to whatever you want to display -->
 <div id="daily_trend" style="display:block;position:relative;width:600px;height:400px">
  <div id="daily_traffic_rank" style="position:absolute;top:0px;left:0px;z-index:10">
   <!--Daily Traffic Rank Trend-->
   <img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=t&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;" width=600 height=400>
  </div>

  <div id="daily_reach_percent" style="position:absolute;top:0px;left:0px;z-index:-1">
   <!--Daily Reach in Percent-->
   <img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=r&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;">
  </div>

  <div id="daily_page_views" style="position:absolute;top:0px;left:0px;z-index:-1">
   <!--Daily Page Views-->
   <img src="http://traffic.alexa.com/graph?&amp;w=400&amp;h=220&amp;o=f&amp;c=1&amp;y=p&amp;b=ffffff&amp;r=1m&amp;u=yoursite.com&amp;">
  </div>
 </div>
 <br/>
 <input type="button" value="View Traffic" onclick="showImage(0)">
 &nbsp;&nbsp;
 <input type="button" value="View Rank" onclick="showImage(1)">
 &nbsp;&nbsp;
 <input type="button" value="View Page Views" onclick="showImage(2)">
 <br/>
<body>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.