Drupal 7 create custom slidershow

Today I gonna show you how to install and setup the amazing views slideshow module on Drupal7.

This tutorial is now uptodate with latest modules!!!

(1) Required Modules (Version: Drupal7.0)

  1. Views (7.x-3.0-beta3)
  2. Views Slideshow (7.x-3.0-alpha1)
  3. Chaos tool suite (7.x-1.0-alpha4)
  4. Libraries (7.x-1.0)
  5. Link Field (7.x-1.0-alpha3)
  6. Token (optional) (7.x-1.0-beta1)

(2) Install the Modules

In Drupal7 you can install modules from the admin section, but I still feel this new feature doesn’t have any meaning, because we have to search for the module link in the Druapl site and then copy paste into the admin module installation area, really crazy. It would have been so good if they would have made it something like wordpress a small search feasture. Anyway I just gonna download and istall it in the old way (I still recommend this old way).

Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules.
Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;

(1) Views (2) Views UI (3) Views Slideshow (4) Views Slideshow: Cycle (5) Chaos tools (6) Link (7) Libraries (8) Token (Optional)

(3) Create Image Cache

In Drupal7 imagecache is part of core module and is named as Image styles. So let’s create two image cache from here, one for the full size slider image and other for the thumbnail image. In this tutorial I use 935×293 (pixels) dimension for the full size slider image and 210×100 (pixels) dimension for the thumbnail image. Note: These configurations csn be defered depends on your needs.

* Fullsize Slider image settings

Go to http://www.yoursitename.com/node#overlay=admin/config/media/image-styles and click on the add new style link
(1) Give an Image style name and click on create new style button
(2) On the next configuration screen select new style you want and then click add button (In this tutorial I choose resize style)
(3) On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 pixels.

Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 pixels.)

(4) Create New Content Type

Let’s create a new content type, From the dashboard menu bar cick on Structure and then content types then click on the add new content type link.

(1) Give a human-readable name, I named it as Featured Slider (machiine name will be auto generated based on the human readable name)
(2) Give a brief and relevant description
(3) Submission form settings, I leave as the default settings
(4) Publishing options, I checked only published (all other settings unchecked)
(5) Display settings, I have unchecked the authour and date info.
(6) Comment settings,I set hidden (disabled)
(7) Menu settings, I leave as default settings.
(8) Click Save and add fields Button

(5) Create New Fields

Here in this example I create only two fileds, and they are image field and link field.
We will use image field for uploading our slider image and link field for creating a custom link where we want our slider to be linked.

 Image Field Settings

(1) Label: Slider Image
(2) Field: slider_image
(3) Field type: image
(4) Widget (form element): image
(5) Click Save button, and on the field settings page leave default settings and click on Save field settings button.
(6) On the image field configuration settings page you can configure as you wish.
I set this field as required, I added a file director name called slider-image so that this images will be arranged sperately from other images.
You can set the maximum upload size and resolution here, I have anabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings

    (1) Label: Slider Link
(2) Field: slider_link
(3) Field type: link
(4) Widget (form element): link
(5) Click Save button,
For the link field configurations leave evrything to default settings.
I have re arranged the field like shown below;
 Title field
Image field
Link field
Body field (you can even remove this field if not necessary)
Manage Display
On the manage display tab you can conigure how the out put of the field to be diplayed.
I have set the link field as hidden and I have also set image label as hidden
Drupal7: manage fields

(6) Create Feature Slider Content

I have created four featured slider content for this tutorial.

(1) Click on add content link
(2) Create Featured Slider content
(3) Give a proper title name
(4) Upload slider image
(5) Give alt and title field names
(6) Give a link title and url where you want the slider to be linked
(7) Leave all othe settings as default except for the path field if yo want you can give an SEO friendly URL alias.
(8) Save the content.

Same way create more Featured Slider contents (I have created four contents)

(7) Create a New View

Now it’s time to create our new Slideshow view.
From the Dashboard menu click on the Structure and then click on the Views.

(1) Click add new view link
(2) Give view name, I have named as Featured Slider (machiine name will be auto generated)
(3) Give an apropriate view description
(4) Choose Show Content of type Featured Slider (your content type name).
(5) Uncheck Create a Pge and check Create a block
(6) Type in Block title and choose display format as “Slideshow” of “fields” items per page 5 (you can enter the number of items you want to display)
(7) Click the button “Continue & edit
Views Field Settings
First let’s add link field (link must be the first field in order to work everything properly) so click on the add icon and from the filter Groups select Content
Add Content: Link, Click “Add & configure button” in the next cofiguration window uncheck “Create a label“. “CheckExclude from display.
Click “Apply button

Next let’s add image field, so click on the add icon and from the filter Groups select content
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click “Add & configure button” in the next cofiguration window uncheck “Create a label“.

Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Fullsize (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click “Apply button

Finally we need one more field for the thumbnail, so let’s click on the add icon and from the filter Groups select Content
Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.)
Click “Add & configure button” in the next cofiguration window uncheck “Create a label” and CHECK EXCLUDE FROM DISPLAY,
Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!)
Image Style: Thumbnail (Choose the imagecache you have created in the above step)
Link image to: Nothing
Style Settings: Leave default settings
No result behaviour: Leave default settings
Rewrite Results: Check Output this field as a link
Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.)
Click “Apply button

Views Filters Settings

In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here!

Views Style Settings

Click on the Format Slideshow | settigs and on the next configuratioin window set as below;
(1) List type: Unordered list
(2) Wrapper class: Leave default settings
(3) Style> Skin: deafult
(4) Slides> Slideshow type: cycle
(5) Cycle options
You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at http://malsup.com/jquery/cycle.

IN SIMPLE ENGLISH
Create a folder named “libraries” in the site/all directory and then create an another folder named “jquery.cycle” in that directory and finally copy and paste only the “jquery.cycle.all.min.js” into this directory.

(6) Transittion: Fade
(7) Action: pause on hover
(8) Internet Explorer Tweaks: default
(9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;)
(10) Bottom Widgets>Pager>Pager type: Fields
(11) Pager field: Content: Image (Note: last one we added for the thumb, don’t mistake since both field will be named same.)
(12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked.
(13) Click Apply button.

Format Show Field Settings

  1. Inline fields: Choose the thumbnail field as inline.
  2. Click Apply button. (Note: Well it actually doesn’t change much in appearance but it does change in the code. Next step use the firebug and find the class and add some styles to display properly.)

(8) Create a Custom Region (optional step)

(1) On your thems folder open the your_theme_name.info file and add a new region like this shown below;
regions[featured_slider] = Featured Slider and save the .info file.
(2) Open your themes page.tpl.php file and add these code where you want your slide to be displayed as shown below;

<?php if ($page[‘featured_slider’]): ?>
<div id=”featured-slider”>
<?php print render($page[‘featured_slider’]); ?>
</div> <!– End Featured Slider–>
<?php endif; ?>

You can even create custom front page template like page–front.tpl.php so that you do’t need to make any changes to the default page.tpl.php template.

[9] Enable & configure the Block

Now this block will be visible in the blocks disabled area, so from the Dashboard menu go to Structure>Block and enable the block to a themes default region  or the custom region we created (featured_slider). (Regions varies depends on the theme you are using.)

Block Configuration Settings
After enabling the block you get a link to configure the block so click on the Configure link and on the settings section set as below;

(1) Block title (if you don’t want blobk title to be displayed just type <none>)
(2) Again you get all enabled theme specific Region settings.
On visibility setings
(3) Pages>Show block on specific page: choose Only the listed pages and type <front> so that this block will be displayed only on the front page.

CSS TIPS TO DISPLAY THUMBNAILS INLINE

Add these CSS codes to your themes style sheet to display the thumbnails inline.
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 20px 6px; } Make necessary adjustments.

That’s all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt’s comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.

Play around and find the best you can in Drupal7, Best wishes.

Advertisements

Drupal7中的jQuery的使用[转]

在Drupal中使用jQuery很简单,这是因为Drupal内置了jQuery,并且在添加JavaScript时会自动加载 jQuery。在Drupal中,通过drupal_add_js()函数来添加JavaScript文件。

drupal7中注意$需用jQuery代替…

一、在页面内添加jQuery(不推荐此方法使用jQuery)

Let’s get set up to play with jQuery.
1. Log into your Drupal site as user 1 (the administrative account).
2. On the Modules page, enable the PHP filter module.

开启PHP filter模块

3. Create a new node of type Basic Page, but on the node creation form, be sure to select “PHP code” under the “Input formats” section. Enter Testing jQuery as the title, and add the following to the body section of the form:

创建一个页面,选择PHP code 的输入格式

<?php
drupal_add_js(‘jQuery(document).ready(function () {
jQuery(“p”).hide();
jQuery(“p”).fadeIn(“slow”);
});’, ‘inline’);
?>
<p id=”one”>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

4. Click Submit, and reload the page. The three paragraphs you created will slowly fade in. Cool, eh? Refresh the page to see it again. Let’s study this example a little more.

The jQuery code is contained in a file, misc/jquery.js. This file is not loaded for every page within Drupal. Instead, anytime a drupal_add_js() call is made, jquery.js is loaded. Two parameters are passed into drupal_add_js(). The first parameter is the JavaScript code you wish to have executed, and the second parameter (inline) tells Drupal to write the code inside a pair of <script></script> tags within the document’s <head> element.

jQuery代码包含在文件misc/jquery.js中。并不是为Drupal中的每个页面都加载这个文件。只有在调用了方法 drupal_add_js()时,才加载它。这里向drupal_add_js()传递了两个参数。第一个参数是一段你希望执行的JavaScript 代码,第二个参数“inline”则用来告诉Drupal将代码写入到文档的<head>元素中 的<script></script>标签里面。
Note:We’re using drupal_add_js() quite simply here, but it has many more possibilities, which you can discover at http://api.drupal.org/api/function/drupal_add_js/7.

drupal_add_js() 更多高级用法参看http://api.drupal.org/api/function/drupal_add_js/7

jQuery:通过ID定位一个元素

Note:Accessing an element by ID is one of the fastest selector methods within jQuery because it translates to the native JavaScript: document.getElementById(“one”). The alternative, jQuery(“p#one”), would be slower because jQuery needs to find all paragraph tags and then look for an intro ID. The slowest selector method in jQuery is the class selector jQuery”.foo”), because a search would have to be made through all elements with the .foo selector class. (It would be faster to do jQuery”p.foo”) in that case.)

在jQuery里面,通过ID访问一个元素是最快的选择器方法之一,这是因为它会被翻译为本地的JavaScript代码:document.getElementById(“one “)。替代方案$(“p#one”)就会慢一些,这是因为jQuery首先需要查找所有的段落标签,然后再从中选择ID为one的元素。在jQuery中最慢的选择器方法就是$(“.foo”),因为它需要在所有的元素中查找选择器类为foo的元素(在该情况下,使用$(“p.foo”)会快一些)。

方法链(Method Chaining)

We can concatenate a series of jQuery methods because most methods within jQuery return a jQuery object. Let’s chain some methods together in a single jQuery command:

我们可以连接一系列的jQuery方法的原因是, jQuery内部的大多数方法都返回一个jQuery对象。让我们在单个jQuery命令中将多个方法串连起来:
// Hide all the p tags, fade them in to visibility, then slide them up and down.
jQuery(“p”).hide().fadeIn(“slow”).slideUp(“slow”).slideDown(“slow”);
jQuery calls are invoked from left to right. The preceding snippet finds all the paragraph tags, fades them in, and then uses a sliding effect to move the paragraphs up and then down. Because each of these methods returns the jQuery wrapper object containing the same set it was given (all the p elements), we can manipulate the same set of elements over and over again until the final effect is achieved.

jQuery的调用是从左向右进行的。前面的代码片段找到所有的段落标签,并渐进的显示它们,然后使用一个幻灯效果把段落移上去再移下 来。由于其中的每个方法返回的jQuery包装器对象都包含了相同的元素集(所有的p元素),所以我们可以对同一个元素集进行一次又一次的操作,直到达到 最终的效果。

添加或删除一个类(Adding or Removing a Class)jQuery can dynamically change the CSS class of an element. Here, we turn the first paragraph of our example red by selecting it by ID and then assigning Drupal’s error class to it:

jQuery可以动态的修改一个元素的CSS类。这里,我们通过ID选中我们例子中的第一个段落,然后为它分配一个Drupal的错误类,这样就将它转变为红色了:

jQuery(“#one”).addClass(“error”);

The counterpart to the addClass() method is the removeClass() method. The following snippet will remove the error class we just added:

与addClass()方法对应的是removeClass()方法。下面的代码片段将删除我们刚刚添加的错误类:

jQuery(“#one”).removeClass(“error”);

And then there’s the toggleClass() method, which adds or removes a class each time it is called:

还有一个toggleClass()方法,每次调用它时都会添加或删除一个类:

jQuery(“#one”).toggleClass(“error”); // Adds class “error”.
jQuery(“#one”).toggleClass(“error”); // Removes class “error”.

jQuery(“#one”).toggleClass(“error”); // Adds class “error” again.

包装已有元素(Wrapping Existing Elements)
Instead of just adding an error class to the <p id=”one”> element, let’s wrap that element in a div so that the red will show up better. The following jQuery snippet will do that:
<?php
drupal_add_js(‘jQuery(document).ready(function () {
jQuery(“#one”).wrap(“<div class=\’error\’></div>”);
});’, ‘inline’);
?>
<p id=”one”>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
Note the escaping of the single quotes, which is necessary because we already have open single quotes inside the drupal_add_js() function.

注意单引号的转义,由于我们在drupal_add_js()内部已经使用了一对单引号,所以需要对双引号内部的单引号进行转义。

修改CSS元素的值(Changing Values of CSS Elements)
jQuery can be used to assign (or reassign) values to CSS elements. Let’s set the border surrounding the first paragraph to solid (see Figure 18-4):
jQuery(“#one”).wrap(“<div class=\’error\’></div>”).css(“border”, “solid”);
Notice that the css method is still acting on the p element, not on the div element, because the wrap method returned the targeted p element after wrapping it.

二、在主题中使用jQuery

Adding JavaScript via a Theme .info File
The most convenient but least flexible way to include JavaScript files is to include a line in your theme’s .info file. Let’s add an effect to your site that emphasizes the logo of your site by making it fade out and then fade in again when a page is loaded. Place the following JavaScript code in a file called logofade.js in your current theme. For example, if you are using the Bartik theme, it would be at themes/bartik/logofade.js.
包含JavaScript文件的最方便的方式,就是在你的主题的.info文件中添加一行代码,不过这种方式也有一个缺点,那就是缺乏灵 活性。让我们为你的站点添加一个效果,用来强调你站点的标识语,在一个页面被加载时,先把它淡出,接着再把它渐显出来。把下面的JavaScript代码 放在你主题下的一个名为logofade.js的文件中。例如,如果你使用的主题为Bartik,那么它就位于themes/Bartik/logofade.js。
// Selects the theme element with the id “logo”, fades it out,
// then fades it in slowly.
jQuery(document).ready(function(){
jQuery(“#logo”).fadeOut(“fast”).fadeIn(“slow”);
});

The JavaScript file is in place; now we just have to tell Drupal to load it. Add the following line to your current theme’s .info file:

JavaScript文件已经有了;现在我们只需要告诉Drupal加载它就可以了。向你的当前主题的.info文件中添加下面一行代码:

scripts[] = logofade.js

The last step is to make Drupal reread the .info file so that it will see that it needs to load logofade.js. To do that, go to Appearance, temporarily switch to a different theme, and then switch back.

最后一步就是让Drupal重读.info文件,这样它就会看到它需要加载logofade.js了。为了实现这一点,导航到“管理➤站点构建➤主题”,临时的转换到一个不同的主题上,然后再转换回来。

This method of adding JavaScript is useful if the JavaScript will be loaded on every single page of your web site. In the next section, you’ll see how to add JavaScript only when a module that uses it is enabled.

如果对于你网站的每个页面,都需要为其加载某一JavaScript文件的话,那么这个方法还是非常有用的。在接下来的一节中,你将看到如何实现,只有当使用JavaScript的模块被启用时,才加载它。

三、在模块内使用jQuery

The following module does just that,using jQuery to identify and hide the blocks in the left and right sidebar regions and providing a helpful button that will bring the blocks back. Here’s sites/all/modules/custom/blockaway/blockaway.info:
下面的模块实现了这一点,它使用jQuery来对左右边栏区域中的区块进行标识和隐藏,并提供了一个有用的按钮用来将区块重新显示出来。

name = Block-Away
description = Uses jQuery to hide blocks until a button is clicked.
package = Pro Drupal Development
core = 7.x
files[]=blockaway.module

And here’s sites/all/modules/custom/blockaway/blockaway.module:

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
drupal_add_js(drupal_get_path(‘module’, ‘blockaway’) .’/blockaway.js’);
}

All the module does is include the following JavaScript file, which you can put at
sites/all/modules/custom/blockaway/blockaway.js:

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class ‘block’ inside the left sidebar.
// Add to that all div elements of class ‘block’ inside the
// right sidebar. Check your theme’s page.tpl.php file to see what
// selectors you should use – the following are for garland.
var blocks = jQuery(‘#sidebar-first div.block, #sidebar-second div.block’);
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery(‘#sidebar-first’).prepend(‘<div id=”collapsibutton”>Show Blocks</div>’);
jQuery(‘#collapsibutton’).css({
‘width’: ’90px’,
‘border’: ‘solid’,
‘border-width’: ‘1px’,
‘padding’: ‘5px’,
‘background-color’: ‘#fff’
});
// Add a handler that runs once when the button is clicked.
jQuery(‘#collapsibutton’).one(‘click’, function() {
// Button clicked! Get rid of the button.
jQuery(‘#collapsibutton’).remove();
// Display all our hidden blocks using an effect.
blocks.slideDown(“slow”);
});
});

When you enable the module on the Modules page, any blocks you have visible should disappear and be replaced with a plain button.
导航到“管理➤站点构建➤模块”,启用该模块,你以前可见的所有区块都消失了,被替换为了一个没有格式的按钮。

三、可覆写的JavaScript (Overridable JavaScript)
The code in blockaway.module is simple and easy to understand. It just makes sure the blockaway.js file is included.However, if the module were more complicated, it would be friendlier to others to put the drupal_add_js() function call in a theme function instead of in hook_init(). That way, those who wanted to use your module but customize the JavaScript code in some way could do so without touching your module code at all (see Chapter 9 for how the theme system works its magic). The code that follows is a revised version of blockaway.module that declares a theme function using hook_theme(), moves the drupal_add_js() call into the theme function, and calls the theme function from hook_init(). The functionality is the same, but savvy developers can now override the blockaway.js file.
blockaway.module中的代码非常简单并易于理解。它只负责包含blockaway.js文件。然而,如果模块更加复杂一点的话,那么将 drupal_add_js()函数调用放在一个主题函数中,来取代放在hook_init()中,这对其他开发者来说会更加友好。这样,对于那些想使用 你的模块,同时又想用一些方式来定制JavaScript代码的用户,他们无需修改你模块的源代码就可以完成定制工作(关于主题系统的更多详细,可参看第 8章)。下面的代码是blockaway.module的修订版本,它使用hook_theme()声明了一个主题函数,并将 drupal_add_js()调用移到了该主题函数中,而在hook_init()中调用这个主题函数。功能是一样的,但是现在聪明的开发者就可以对 blockaway.js文件进行覆写了。

<?php
/**
* @file
* Use this module to learn about jQuery.
*/
/**
* Implements hook_init().
*/
function blockaway_init() {
theme(‘blockaway_javascript’);
}
/**
* Implements hook_theme().
* Register our theme function.
*/
function blockaway_theme() {
return array(
‘blockaway_javascript’ => array(
‘arguments’ => array(),
),
);
}
/**
* Theme function that just makes sure our JavaScript file
* gets included.
*/
function theme_blockaway_javascript() {
drupal_add_js(drupal_get_path(‘module’, ‘blockaway’) .’/blockaway.js’);
}

覆写的JavaScript文件:
Let’s go ahead and see if this approach works. We’re going to override the JavaScript provided by the module with JavaScript provided by the theme. Copy sites/all/modules/custom/blockaway/lockaway.js to your current theme—for example, themes/bartik/ blockaway.js. Let’s change the JavaScript file slightly so that we’ll know which JavaScript file is being used. Change the effect from slideDown(“slow”) to fadeIn(5000); this will fade in the blocks over a period of five seconds. Here is the new file:
让我们继续前进,来看看这种方法是否可以工作。我们将使用主题提供的JavaScript,来覆写模块提供的 JavaScript。把sites/all/modules/custom/blockaway/blockaway.js拷贝到你的当前主题下 —-例如,themes/bartik/blockaway.js。让我们稍微的修改一下JavaScript文件,这样我们就知道正在使用的是哪个 JavaScript文件。将特效从slideDown(“slow”)改为fadeIn(5000);这将使用5秒钟的时间来渐进的显示区块。下面是新 文件:

/**
* Hide blocks in sidebars, then make them visible at the click of a button.
*/
jQuery(document).ready(function() {
// Get all div elements of class ‘block’ inside the left sidebar.
// Add to that all div elements of class ‘block’ inside the
// right sidebar.
var blocks = jQuery(‘#sidebar-first div.block, #sidebar-second div.block’);
// Hide them.
blocks.hide();
// Add a button that, when clicked, will make them reappear.
jQuery(‘#sidebar-first’).prepend(‘<div id=”collapsibutton”>Show Blocks</div>’);
jQuery(‘#collapsibutton’).css({
‘width’: ’90px’,
‘border’: ‘solid’,
‘border-width’: ‘1px’,
‘padding’: ‘5px’,
‘background-color’: ‘#fff’
});
// Add a handler that runs once when the button is clicked.
jQuery(‘#collapsibutton’).one(‘click’, function() {
// Button clicked! Get rid of the button.
jQuery(‘#collapsibutton’).remove();
// Display all our hidden blocks using an effect.
blocks.fadeIn(“5000”);
});
});

The last change we need to make is to tell Drupal to load this new JavaScript file instead of the one in sites/all/modules/custom/blockaway. We do that by overriding the theme function. Add the following function to the template.php file of your theme (if your theme doesn’t have a template.php file,it’s okay to create one):
我们最后要做的修改就是告诉Drupal加载这个新文件,从而取代sites/all/modules/custom/blockaway中的文件。我们 通过覆写主题函数来实现这一点。向你主题的template.php文件中(如果你的主题还没有一个template.php文件,那么你需要创建一 个),添加下面所给的函数:

/**
* Override theme_blockaway_javascript() with the
* following function.
*/
function bartik_blockaway_javascript() {
drupal_add_js(path_to_theme() . ‘/blockaway.js’);
}

Note:Change the name of the preprocess function so that it uses the name of the theme you are using. In the preceding example, I am using the Bartik theme.

Visit the Modules page to rebuild the theme registry so your changes will be recognized. When you visit a page in your web browser, you should see the Show Blocks button, and clicking it should reveal the blocks via a gradual fade-in effect instead of the slide effect we were using earlier. Congratulations!

现在,当你使用浏览器来访问一个页面时,你应该能够看到“显示区块”按钮了,点击这个按钮,将会使用一个渐进的淡入效果来显示区块,而不是我们前面所用的幻灯效果。恭喜恭喜!
You’ve learned how to use jQuery in your module, how to write it in a way that is friendly to themers and other developers, and coincidentally, how to cleanly override or enhance JavaScript files provided by other module developers who have been equally courteous.

你已经学会了如何在你的模块中使用jQuery,如何使用友好的方式编写jQuery以方便主题制作者和其他的开发者,同时,你还学会了如何覆写或增强其它模块中的JavaScript文件,这里假定这些模块中的JavaScript文件可被覆写。
Before we leave this example, let me demonstrate how to override a template file. First, remove the bartik_blockaway_javascript() function that you added to the template.php file. Next, in your current theme, create an empty file called blockawayjavascript. tpl.php. For example, if you are using the Bartik theme, create themes/bartik/blockaway-javascript.tpl.php. Don’t put anything inside this file.
Now visit the Modules page. The act of visiting this page will rebuild the theme registry. Drupal will find the template file and use it instead of the theme function in your module. The result is that blockaway.js will never be loaded; you’ve essentially commented out the theme function by creating an empty template file (recall from Chapter 9 that, when building the theme registry, Drupal will look for a template file and then for theme functions).

在我们结束这个例子的学习以前,让我演示一下如何使用模板文件进行覆写。首先,删除你添加到template.php文件中的 bartik_blockaway_javascript()函数。接着,在你的当前主题中,创建一个空文件 blockawayjavascript.tpl.php。例如,如果你使用的是Bartik主题,那么创建的就是themes/Bartik/blockaway-javascript.tpl.php。不要在这个文件中放置任何东西。现在导航到模块页面,访问这个页面的作用就是重新构建主题注册表。Drupal 将找到该模板文件,并使用它来替代你模块中的主题函数。最终的结果就是永远也不会加载blockaway.js了;通过创建一个空的模板文件,你实质上就是注释掉了该主题函数。

Now, add the following to your blockaway-javascript.tpl.php file:

现在,向你的blockaway-javascript.tpl.php文件中添加以下代码:

<?php drupal_add_js(path_to_theme() . ‘/blockaway.js’); ?>

When you reload your page, you should see that the JavaScript file is now loading. Do you see how these techniques can be useful for substituting your own enhanced JavaScript file in a third-party module or for preventing some JavaScript from loading?

当你重新加载页面时,你应该可以看到JavaScript文件现在加载进来了。如果你想将第3方模块中的JavaScript文件替换为你的增强版本,或者想阻止加载一些JavaScript文件时,这里所讲的这些技术还是很有用处的。

You cannot call drupal_add_js() from inside page.tpl.php or any theme functions that are called in its preprocessing (such as blocks), because they are executed too late in the page building process. See modules/block/block-admin-display-form.tpl.php for an example of a core template file that adds JavaScript.

你不能在page.tpl.php中调用drupal_add_js(),对于其它的一些主题函数,如果是在它的预处理阶段调用的话 (比如区块),那么也不能使用drupal_add_js()。为什么呢?这是因为它们在页面构建流程中执行的顺序过于靠后。核心模板文件是如何添加 JavaScript的,可参看modules/block/block-admin-display-form.tpl.php。

[转贴]HTML常用语句汇总

前言:编码过程难免会有错误和疏漏,还请各位高手指正!

第一节:网站链接专用代码

基本代码:

文字链接:

<A href=”链接地址”target=_blank></A>

图片链接:

<A href=”链接地址”target=_blank><IMG src=”图片地址” ></A>

<A></A>是插入地址链接的标签对,单击插入在<A></A>标签对内的文字,图片,就可以链接进入指定的网页或链接地址.
<IMG src=”图片地址“是插入显示链接的图片标签.
href= 是<A>标签的属性,用于实现地址的链接.target=_blank为窗口弹出属性定义,不加此属性则为背负式链接.实例:

1.网站链接用代码:

1.背负式网站文字链接代码:

<A href=”http://q.163.com/163.com/“><B><FONTcolor=#997166>阳光公园</FONT></B></A>

效果:

阳光公园

2.窗口弹出式网站文字链接代码:

<A href=”http://q.163.com/163.com/target=_blank><FONT color=#997166><STRONG>阳光公园</STRONG></FONT></A>               

效果:

阳光公园

3.背负式网站图片链接代码:

<A href=”http://q.163.com/163.com/”&gt;
<IMG style=”WIDTH: 89px; HEIGHT: 72px” height=70 src=”http://blog.163.com/photo/QDfVg3WEqY31Za2yMilcLA==/3156178913856667750.jpg” width=28> </A>
效果:

4.窗口弹出式网站图片链接代码:

<A href=”http://q.163.com/163.com/” target=_blank>
<IMG style=”WIDTH: 89px; HEIGHT: 72px” height=70 src=”http://blog.163.com/photo/QDfVg3WEqY31Za2yMilcLA==/3156178913856667750.jpg
” width=28> </A>
效果:

5.文字加图片窗口弹了式链接代码:

<A href=”http://q.163.com/163.com/&#8221; target=_blank>
点击图片<IMG style=”WIDTH: 89px; HEIGHT: 72px” height=70 src=”http://blog.163.com/photo/QDfVg3WEqY31Za2yMilcLA==/3156178913856667750.jpg&#8221; width=28>欣赏更多</A>

效果:

点击图片欣赏更多

2.论坛中进行网站链接专用代码:

1.图片链接:

[b][url=http://q.163.com/163.com/]点击[img]http://blog.163.com/photo/QDfVg3WEqY31Za2yMilcLA==/3156178913856667750.jpg[/img]欣赏更多[/url][/b]

2.文字链接:

[b]点击[url=http://q.163.com/163.com/]阳光杂志[/url]欣赏更多[/b]

3.字体颜色:

[b][color=”#8000ff”]再换个颜色试试[/color][/b]

4.字号:

[size=4]文字[/size]

 

 

第二节:文字移动专用代码

1.基本语法解释:

1.基本语法[默认向左移动]:

<MARQUEE>要移动的文字</MARQUEE>

效果:

要移动的文字

2.文字移动属性代码:

<MARQUEE style=”WIDTH: 600px; HEIGHT: 200px” scrollAmount=1 direction=up align=”center”>要移动的文字</MARQUEE>

效果:

要移动的文字

3.语法解释:

style= 是<MARQUEE>标签的属性,用于设定滚动框的大小.

WIDTH: 600px 是设定滚动框的宽度, HEIGHT: 280px 是设定滚动框的高度,

; 是二个参数之间的分隔符.

scrollAmount=1 是设定文本滚动的速度,单位是 pixel , 值越大,滚动的速度越快。

scrolldelay=100 是设定移动的时间延迟, 单位是千分之一秒,值越大, 移动的速度越慢.初学时可省略.

behavior= 属性是设定文本滚动的方式。参数 scroll 会向同一方向移动, slide 会有类似滑动的效果, alternate 会往复移动。

direction= 属性是设定文本滚动的方向。参数 up 是向上移动, down 是向下移动, left 是向左移动,right是向右移动,

2.其它方式的文字移动举例说明:

 

[1]文字行走的方向:

<marquee direction=left>文字从右向左移!</marquee>

从右向左移!

<marquee direction=right>文字从左向右移!</marquee>

从左向右移!

<marquee behavior=scroll>文字一圈一圈绕着走!</marquee>

文字一圈一圈绕着走!

<marquee behavior=slide>文字只走一次就歇了!</marquee>

文字只走一次就歇了!

<marquee behavior=alternate>文字来回走!</marquee>

文字来回走!

 

[2]文字行走的次数:

<marquee loop=3 width=50% behavior=scroll>文字只走 3 趟哟!</marquee>

文字只走 3 趟哟!

 

[3]文字行走速度控制:

<marquee scrollamount=20>文字行走得好快!</marquee>

文字行走得好快!

 

[4]文字延时:

<marquee scrolldelay=500 scrollamount=100>文字走一步,停一停!</marquee>

啦啦啦,我走一步,停一停!

 

[5]文字对齐方式:

 

<font size=6>
<marquee align=# width=400>文字移动上中下对齐</marquee>
</font>

对齐上沿:<MARQUEE width=400 align="top">文字对齐上沿</MARQUEE>

文字对齐上沿

文字对齐中间:<MARQUEE width=400 align=”middle”>文字对齐中间</MARQUEE>

文字对齐中间

对齐下沿: <MARQUEE width=400 align=”bottom “>文字对齐中间</MARQUEE>

文字对齐下沿

[6]文字的底色设置:

<marquee bgcolor=ff0000>文字在色彩中移动!</marquee>

文字在色彩中移动!

底色面积设置:

<marquee height=40 width=50% bgcolor=aaeeaa>
文字底色的面积
</marquee>

文字底色的面积

第三节:多行文字移动代码

1.多行文字移动代码:

<MARQUEE style=”WIDTH: 380px; HEIGHT: 120px” scrollAmount=2 direction=up align=”center”>
<P align=center><FONT color=#3af93a size=5>李白诗一首<BR><BR><BR>床前明月光,<BR><BR>疑是地上霜.<BR><BR><BR><P align=center><BR><BR><BR>举头望明月,<BR><BR>低头思故乡.<BR><BR></FONT></P></MARQUEE>
效果:

诗朗诵

床前明月光,
疑是地上霜.
举头望明月,
低头思故乡.

2.语法解释:

<B></B>为粗体代码.

<P align=center>文字居中设置 .
文字居左align=left
文字居中 align=center
文字居右 align=right
</P>本段落结束。

<BR>为强制换行.在 <P></P>之间插入一个<BR>,相当于插入半个空行。

color=#3af93a文字色号.

size=5为字体大小.

<MARQUEE style=”WIDTH: 380px; HEIGHT: 120px” scrollAmount=2 direction=up align=”center”>

设定文本滚动区。WIDTH: 380px 是滚动区的宽度。HEIGHT: 120px” 是滚动区的高度。
scrollAmount=2 是设定文本滚动的速度,值越大,滚动的越快。
direction=up 设定文本滚动的方向。up 是向上滚动。
align=”center” 是居中显示。
</MARQUEE>是设定的文本滚动区结束。

第四节:文字的特殊移动

1.舞动的文字代码:
<MARQUEE scrollAmount=3 direction=down behavior=alternate height=70>
<MARQUEE scrollAmount=2 behavior=alternate width=622>舞动的文字代码</MARQUEE>
</MARQUEE>

效果:

舞动的文字代码

2.文字下,上,下移动代码:

<MARQUEE scrollAmount=1 direction=down behavior=alternate width=622 height=470>
<STRONG><FONT color=#ff00ff size=4>下上下文字代码</FONT></STRONG></MARQUEE>

效果:

下上下文字代码

3.上下上文字代码:

<MARQUEE scrollAmount=1 direction=up behavior=alternate width=622 height=170>
<STRONG><FONT color=#ff00ff size=4>上下上文字代码</FONT></STRONG></MARQUEE>

效果:

上下上文字代码

第五节:插入背景及插入背景文字

1.基本代码:

<TABLE style=”WIDTH: 200px; HEIGHT:220px” align=center cellSpacing=30 background=http://blog.163.com/photo/gA3wKPwCIlKITty3BmJadA==/5143673724410573123.jpg>
<TBODY>
<TR>
<TD>
<P>
<FONT color=#3af93a size=5>要插入的文字:<BR><BR><A href=”http://q.163.com/163.com/&#8221;target=_blank><FONT color=#997166>点击进入阳光公园</FONT></A><BR><BR>插入文字结束  

</FONT>
</P>
</TD>
</TR>
</TBODY>
</TABLE>

效果:

要插入的文字:

点击进入阳光公园

插入文字结束处

说明:<TABLE></TABLE>标签对,是定义表格,插入背景图的语句。
<TABLE style=”WIDTH: 600px; HEIGHT:520px” align=center cellSpacing=30 background=http://bbs.muwen.com/fileuploaddir/4B26185301.5.gif>
此行代码是背景(表格)设定,<TABLE>(定义开始)要放在全文的最前面,
</TABLE>(定义结束)要放在全文的最后面,才能使整个帖子成为一体。
style= 是 <TABLE> 标签的属性设定。
“WIDTH: 600px; HEIGHT:520px”是设定的背景(表格)的宽度和高度。
; 是两个参数之间的分隔符。
在一个语句中,每两个参数之间,要用英文的一个空格作为分隔符。
align=center 是设定属性参数,背景(表格)居中排列。
cellSpacing=30 属性参数是设定内框线宽度,单位是 px(pixel)。
background= 属性参数是设定插入背景图片的地址。
http://bbs.muwen.com/fileuploaddir/4B26164934.3.gif 是一张背景图片的网上地址。
<TBODY> 定义表格</TBODY>定义表格结束。
<TR> 定义列 </TR> 定义列结束。
<TD> 定义行 </TD> 定义行结束。
<P align=center> 段落(换行),可包括3种选项:
<P>默认居左或 <P align=left>
居中 <P align=center>
居右 <P align=right>
</P>本段落结束。
<FONT color=#3af93a size=5>
<FONT></FONT>是设定字体,字色和字号的标签对。
color= 属性参数是设定字色。
字色的值是在#000000至#ffffff(16进位)之间。
前两位代表红色,中间两位代表绿色,后两位代表蓝色。可按自已的喜好组合。
size= 属性参数是设定字号。

<BR>是强制换行,无格式要求。
在 <P></P>之间插入一个<BR>,相当于插入半个空行。
2.背景文字移动代码:

将第三节.1中的代码原封不动放到背景的文字部分,代码:
<TABLE style=”WIDTH: 200px; HEIGHT:220px” align=center cellSpacing=30 background=http://blog.163.com/photo/gA3wKPwCIlKITty3BmJadA==/5143673724410573123.jpg>
<TBODY>
<TR>
<TD>

<MARQUEE style=”WIDTH: 200px; HEIGHT: 120px” scrollAmount=2 direction=up align=”center”>
<P align=center><FONT color=#3af93a size=5>李白诗一首<BR><BR><BR>床前明月光,<BR><BR>疑 是地上霜.<BR><BR><BR><P align=center><BR><BR><BR>举头望明月,<BR><BR> 低头思故乡.<BR><BR></FONT></P></MARQUEE>

</TD>
</TR>
</TBODY>
</TABLE>

效果:

李白诗一首

床前明月光,

疑是地上霜.

举头望明月,

低头思故乡.

第六节:图片移动代码

1.图片基本代码:

<IMG height=400 src=”图片地址” width=500>

图片设定的属性: height=400 是设定图片的高度,width=500 是设定图片的宽度.
下面给出一个完整代码:

<IMG height=400 src=”http://blog.163.com/photo/uioqMxK-gEG-JMTG1nSGmg==/3112831767443229649.jpg&#8221; width=500>

效果:

2.图片的移动:

图片的移动可参照文字移动代码,在此只把第四节中的文字上下上代码中的文字换成图片代码,并加入圈子阳光公园的链接,其它方式不再赘述:

<MARQUEE scrollAmount=1 direction=up behavior=alternate width=622 height=170>
<A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG width=310 height=118 src=”http://image.bulo.163.com/groupfile/906/-0-Auphoto“>进入我的圈子 </A>
</MARQUEE>

效果:

点击图片进入我的圈子

3.多张图片的移动:

在此只举自右向左移动一例,其它参照多行文字的移动代码即可.

[1]图片左右排列自左向右移动:

<MARQUEE style=”WIDTH: 673px; HEIGHT: 126px”><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://image.bulo.163.com/groupfile/906/-0-Auphoto” width=310>进入我的圈子 </A>&nbsp;&nbsp; &nbsp; <A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ORAMO0qbHX8rXGf88hEXmQ==/920986123797271650.jpg” width=310>进入我的圈子 </A>&nbsp;&nbsp; &nbsp; <A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ikyyGghfoxr7VPe58IGD6Q==/3174474787342787290.jpg” width=310>进入我的圈子 </A></MARQUEE>

图片与图片之之间用空格代码&nbsp;分隔开来.

效果:

点击图片进入我的圈子     点击图片进入我的圈子     点击图片进入我的圈子

[2]图片上下排列自上而下移动的代码:

<MARQUEE style=”WIDTH: 673px; HEIGHT: 126px” direction=down><P align=center><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://image.bulo.163.com/groupfile/906/-0-Auphoto” width=310>进入我的圈子 </A> <BR><BR> <A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ORAMO0qbHX8rXGf88hEXmQ==/920986123797271650.jpg” width=310>进入我的圈子 </A> <BR><BR><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ikyyGghfoxr7VPe58IGD6Q==/3174474787342787290.jpg” width=310>进入我的圈子 </A></P></MARQUEE>

效果:

 

点击图片进入我的圈子

点击图片进入我的圈子

点击图片进入我的圈子

4.背景图片的特效处理:

[1]圆形朦胧代码:

<TABLE style=”FILTER: Alpha(opacity=100,style=2)” height=202 cellSpacing=0 cellPadding=0 width=410 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

              阳光公园

[2]方形朦胧代码:

<TABLE style=”FILTER: Alpha(opacity=100,style=3)” height=312 width=410 cellSpacing=0 cellPadding=0 width=”100%” align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

       阳光公园

[3]过滤镜代码

<TABLE style=”FILTER: blur(strength=100)” width=410 height=212 cellSpacing=0 cellPadding=0 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg  border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

            阳光公园

[4]黑白过滤代码:

<TABLE style=”filter:gray” width=410 height=212 cellSpacing=0 cellPadding=0 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

         阳光公园

[5]加色过滤代码:

<TABLE style=”filter:invert” width=410 height=312 cellSpacing=0 cellPadding=0 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

              阳光公园

[6]白色过滤代码:

<TABLE style=”FILTER: xray” height=312 cellSpacing=0 cellPadding=0 width=410 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

       阳光公园

[7]走形代码:

<TABLE style=”filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)” width=410 height=312 cellSpacing=0 cellPadding=0 align=center background=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>
<TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

   阳光公园

[8]倒影代码:

<P align=center>
<TABLE style=”FONT-SIZE: 27pt; WIDTH: 220px; COLOR: #00ff00; HEIGHT: 10px”><IMG src=”http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg”><TBODY&gt;
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>
<TABLE  style=”FONT-SIZE: 27pt; FILTER: wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv(); WIDTH: 220px; COLOR: #3333ff; HEIGHT: 10px”><IMG src=”http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg”&gt; <TBODY>
<TR>
<TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A href=”http://q.163.com/163.com/”><B><FONTcolor=#ff0066 size=7>阳光公园</FONT></B></A></TD></TR></TBODY></TABLE>

效果:

 阳光公园

 阳光公园

不做背景图片时,可使用下列代码:

<P align=center>

<IMG height=220 src=”http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg&#8221; width=400><BR><IMG style=”FILTER: wave
(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()” height=220 src=”http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg&#8221; width=400> </P>

效果:


[9]以上各代码在不做背景图片的情况下可以采用<IMG代码形式,下面的代码就是从[7]演化而来,其它各代码可同理演化:

<P align=center>

<IMG style=”filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)” width=410 height=312 cellSpacing=0 cellPadding=0 align=center src=http://www.blog.163.com/photo/p1RbsByOR_2j5zxKWqrwBA==/920986123797271649.jpg border=0>

效果:

6.背景插入图片代码:

代码示例1:

<TABLE style=”WIDTH: 685px; HEIGHT: 401px” cellSpacing=10 align=center background=http://blog.163.com/photo/gA3wKPwCIlKITty3BmJadA==/5143673724410573123.jpg>
<TBODY>
<TR>
<TD><MARQUEE style=”WIDTH: 673px; HEIGHT: 326px” direction=down><P align=center><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://image.bulo.163.com/groupfile/906/-0-Auphoto” width=310>进入我的圈子 </A> <BR><BR> <A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ORAMO0qbHX8rXGf88hEXmQ==/920986123797271650.jpg” width=310>进入我的圈子 </A> <BR><BR><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG height=118 src=”http://blog.163.com/photo/ikyyGghfoxr7VPe58IGD6Q==/3174474787342787290.jpg” width=310>进入我的圈子 </A></P></MARQUEE>
</TD></TR></TBODY></TABLE>

效果:

点击图片进入我的圈子

点击图片进入我的圈子

点击图片进入我的圈子

代码示例2:

<TABLE style=”WIDTH: 685px; HEIGHT: 401px” cellSpacing=10 align=center background=http://blog.163.com/photo/gA3wKPwCIlKITty3BmJadA==/5143673724410573123.jpg>
<TBODY>
<TR>
<TD>
<MARQUEE style=”WIDTH: 618px; HEIGHT: 344px” scrollAmount=1 direction=up behavior=alternate>
<P align=center><A href=”http://q.163.com/163.com/” target=_blank>点击图片 <IMG style=”WIDTH: 318px; HEIGHT: 99px” src=”http://image.bulo.163.com/groupfile/906/-0-Auphoto” width=310>进入我的圈子 </A></P></MARQUEE></TD></TR></TBODY></TABLE>

效果:

点击图片进入我的圈子

第七节:影音播放器代码

基本代码:

http://www.wenyi.com/art/MUSIC/MUSIC/gongxian/eqyy.mp3

 

语法解释:

<EMBED src=音乐网址。
插入音乐的播放器,音乐可用你喜欢的歌曲网址替换。
width=280 height=40 是设定播放器的宽度和高度。
将播放器的宽度和高度值均设定为 0 ,即:width=0 height=0 便把播放器隐藏了,在帖子中就看不到播放器了。
type=audio/mpeg 是设定音乐为 mp3 格式。
type=audio/x-ms-wma 是设定音乐为 wma 格式。
现在只支持这两种格式,要根据你使用的音乐格式正确设定。
loop=”true” 是设定音乐循环播放,可填入数字设定播放次数.autostart=”-1″ 是设定音乐播放器自动播放,autostart=”0″ 是不自动播放。
loop=”-1″ 是设定音乐循环播放,可填入数字设定播放次数。
</EMBED> 是音乐设定结束。

1.MP3播放器代码:

[1]红色播放器代码:

<TABLE style=”FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ffffff; FONT-STYLE. normal; FONT-FAMILY: Tahoma, Verdana; FONT-VARIANT: normal” cellSpacing=0 cellPadding=0 width=140 border=0>
<TBODY>
<TR>
<TD style=”BACKGROUND-COLOR: red”>http://span</TD></TR></TBODY></TABLE>

效果:

[2]黑色播放器代码:

http://span

效果:

[3]乳白色MP3播放器代码:

http://www2.ccmove.com/download_010/378/1891426/%C4%F1%C3%F9%A3%A8%D4%C3%B6%F9%B6%AF%CC%FD%A3%A9.mp3

效果:

[4]透明播放器代码:

<TABLE style=”FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)xray(); WIDTH: 200px; HEIGHT: 40px”>
<TBODY>
<TR>
<TD>http://span</TD></TR></TBODY></TABLE>

效果

第八节节:FLASH代码

1.基本代码:

http://FLASH地址

2.FLASH的叠加代码:

<CENTER><TABLE style=”WIDTH: 280px; HEIGHT: 222px” cellSpacing=8 cellPadding=1 width=280 align=center background=http://www.cn898.net/bg/x/1/back_78.gif border=1 table>
<TBODY>
<TR>
<TD>http://www.5blogs.com/rss/3_.swfhttp://imgfree.21cn.com/free/flash/162.swf</TD></TR></TBODY></TABLE></CENTER>

效果: