douchu4048 2011-04-26 16:58
浏览 92
已采纳

在某些版本的Chrome中,无法使用Javascript更改图像的src

Never could have imagined that chrome would have been the browser giving me grief, but the slideshow for our new website does not function properly in some versions of Chrome.

The error occurs here:

"mainPicture.src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"

Claiming that I can't modify mainPicture, an id that doesn't exist. Obviously, other browsers don't have a problem seeing this object.

All help is much appreciated!

.

You can find the page here.

Source code:

<?php 
/********************************************************************
 *                GATHER IMAGES FROM IMAGE DIRECTORY                *
 ********************************************************************/

// Define directory where images are stored
$directory = "../../images/slideshow/";

// Create blank array to store image names
$pic_array = array("");
$num_pics;

// Create number to define position of images in array
$counter = 0;

// Gather pictures from image directory
if(is_dir($directory))
{   
    // Open directory to view files
    if($dh = opendir($directory))
    {   
        // Continue while still files to view
        while(($file = readdir($dh)) !== false)
        {   
            // Stop if picture limit of 6 reached
            if($counter == 6)
                break;

            // Gather if object found is file or directory
            $file_check = filetype($directory.$file);

            // If object is a file, add it to the slideshow
            if ($file_check == "file")
            {
                $extension = substr($file, strpos($file, "."));

                if ($extension == ".png" || $extension == ".jpg")
                {
                    $pic_array[$counter] = $file;
                    $counter++;
                }
            }
        }
    }   
}

// Determine number of pics gathered
$num_pics = count($pic_array);
?>

<html>
<head>
<link href="scripts/slideshow.css" rel="stylesheet" type="text/css">

<?php
/********************************************************************
 *                  CONTROL BEHAVIORS OF SLIDESHOW                  *
 ********************************************************************/
?>
<!-- Begin script to control slideshow -->
<script type = "text/javascript">
var thumbTop    = 450; // starting value of thumb.style.top (make sure multiple of increment)
var highestTop  = 342; // highest point mask can be on screen ,-, (make sure multiple of increment)
var lowestTop   = 450; // lowest point mask can be on screen ,_, (make sure multiple of increment)
var delay = 2;      // speed in which slide up and down methods are called
var increment = 5;  // value that thumbTop increments with each method call
var intervalUp;     // interval for thumb upward movements 
var intervalDown;   // interval for thumb downward movements

function startThumbSlideUp()
{
    window.clearInterval(intervalDown);
    intervalUp = window.setInterval(thumbSlideUp,delay);
}

function startThumbSlideDown()
{
    window.clearInterval(intervalUp);
    intervalDown = window.setInterval(thumbSlideDown,delay);
}

function thumbSlideUp()
{
    thumbTop -= increment;

    if (thumbTop <= highestTop)
    {
        thumbTop = highestTop;
        window.clearInterval(intervalUp);
    }
    else
        thumbMask.style.top = thumbTop;
}

function thumbSlideDown()
{
    // Added to fix issue where images would start from too large a height
    if (thumbTop <= highestTop)
        thumbTop = highestTop;

    thumbTop += increment;

    if (thumbTop >= lowestTop)
    {
        thumbTop = lowestTop;
        window.clearInterval(intervalDown);
    }
    else
        thumbMask.style.top = thumbTop;
}

// Move marker above image <pos>
function setMarkerPos(pos)
{
    marker.style.left = 600 - (66 * (pos)) + 19;
}

</script>
</head>

<?php
/********************************************************************
 *                        DISPLAY SLIDESHOW                         *
 ********************************************************************/

// Start body and make images unhighlightable
echo '<body onselectstart="return false" style="margin: 0px;">';

// Create base value to increment horizontal position of thumbnails
$curr_thumb_left = 595; // (ignore this comment) 660<width of image> - 66<width of thumb> - 10<space between side> // 660

// Create and display main (large) image and image thumbnails
echo '<div id="mask" onmouseout = "startThumbSlideDown()" onmouseover = "startThumbSlideUp();">
';
echo '<img src = "'.$directory.$pic_array[0].'" id = "mainPicture" height = "420" width = "660" style = "z-index: -1; position:absolute;"/>
';
echo '<div id="thumbMask" height="66" width="660" style="z-index: 1; top: 450px; position: absolute;">
';
echo '<img id="marker" src="images/marker.png" height="10" width="10" style="z-index: 2; top: 0px; position: absolute;" onload="setMarkerPos(0);"/>';

// Search through image array, then assign names to and display thumbnails
for ($i=0; $i < $num_pics; $i++)
{
    // Point to pic in array
    $current_pic = $pic_array[$i];

    // Create and display image thumbnails
    if ($current_pic !== "")
    {       
        echo '<img src = "'.$directory.$current_pic.'" id = "thumb'.$i.'" height = "50" width = "50" style = "left:'.$curr_thumb_left.'px; top: 10px; border: 3px white solid; position: absolute;" onclick = "mainPicture.src = \''.$directory.$current_pic.'\'; setMarkerPos('.$i.')"/>
        ';

        // Move left value to the left [50px width + (3px padding * 2 sides) + 10px space between = 66px]
        $curr_thumb_left -= 66;
    }
}

echo '</div>';
echo '</div>';
?>

</body>
</html>
  • 写回答

3条回答 默认 最新

  • drslez4322 2011-04-26 17:06
    关注

    Chrome doesn't make image elements available by just their "id" value; you have to use document.getElementById("mainPicture") to get a reference to the DOM element. That'll work in all browsers anyway, so it's safe to just code it that way.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题